网 友 一 直 在 讨论 : App Inventor 到 底 能 干什么 ”有 人 说 这 就 是 Scrath 的 升级 版 ， 中 学 生 玩 玩 吧 ; 有 人 说 功能 太 弱 ， 还 是 学 Eclipse 吧 ; 有 人 说 ， 零 基础 的 入 门 还 行 ; 还 有 人 说 ， 功 能 很 强大 ， 我 的 应 用 已 
经 上 架 了 。 这 些 看 法 都 只 代表 了 App Inventor 的 一 方面 。 图 形 化 的 界面 、 云 积木 的 方式 ， 的 确 十 分 便利 ， 尤 其 是 对 于 非 计算 机 专业 、 没 有 编程 基础 的 读者 来 说 ， 上 手 很 容易 。 利 用 App Inventor， 你 可 以 两 
分 钟 做 出 一 个 WAP 客 户 端 ，5 分 钟 做 出 一 个 播放 器 ; 若是 使 用 Eclipse， 可 能 需要 花费 一 个 月 的 时 间 。 与 此 同时 ，App Inventor 的 源码 是 开源 的 ， 如 果 你 的 编程 技术 非常 棒 ， 你 可 以 开发 出 一 个 组 件 ， 方 便 更 


多 的 网 友 。 


士 局 X 


如 今 ， 智 能 手机 已 然 融入 人 们 的 生活 ， 各 行 各 业 的 人 们 都 已 经 离 不 开 它 。 学 习 一 点 App Inventor 知 识 ， 结 合 自己 的 行业 知识 ， 也 许 能 开发 出 一 款 很 酷 又 很 实用 的 应 用 ， 这 是 程序 员 不 能 帮 你 解决 的 ， 
为 只 有 自己 才 真正 了 解 自己 的 需求 ， 开 发 出 适合 自己 的 应 用 。 这 两 年 间 ， 我 看 到 一 些 非 计 算 机 专业 的 网 友 开 发 出 了 一 些 特别 的 应 用 ， 如 电阻 查询 、 税 控 发 票 验证 、 交 通 事故 赔偿 计算 器 等 。 尽 管 我 可 能 不 了 
解 这 些 应 用 的 具体 功能 ， 但 我 相信 这 些 应 用 确实 给 他 们 的 工作 和 生活 带 来 了 帮助 ， 这 才 是 App Inventor 的 伟大 意义 一 一 人 人 都 是 开发 者 。 


感谢 Google 和 MIT 开 发 了 这 款 软件 ， 特 别 是 MIT 结 合 国内 访问 服务 器 不 稳定 的 情况 ， 开 发 了 国内 可 以 访问 的 备用 服务 器 (http://contest.appinventor.mit.edu/) 。 在 本 书 完 成 之 际 ，MIT 为 推广 App 
Inventor 2 在 中 国 的 使 用 开发 出 中 文 版 界面 ， 目 前 已 经 进入 测试 阶段 。 


感谢 App Inventor 中 文 网 (http://www.appinventor.com.cn/) 的 第 一 任 站 长 赵 延 生 建立 了 这 样 一 个 供 国内 网 友 交 流 的 平台 . 
App Inventor 欢 迎 各 行 各 业 的 朋友 加 入 ， 只 有 大 家 的 需求 和 创意 才能 让 App Inventor 更 好 地 发 挥 出 它 应 有 的 作用 。 
编者 


2014 年 9 月 


第 1 章 App Inventor 2 入 门 


本 章 介 绍 App Inventor 2 的 基础 知识 、 环 境 搭建 及 界面 ， 为 后 面 的 应 用 开发 打下 基础 。 


1.1 App Inventor 2 基础 知识 


App Inventor 是 一 款 基于 Web、 面 向 没有 编程 经 验 的 初学 者 的 Android 应 用 开发 工具 。 它 最 初 是 谷歌 实验 室 (Google Lab) 2009 年 开始 ， 由 麻 省 理工 学 院 (MIT) 的 Hal Abelson 教 授 主 导 的 一 个 实验 
项 目 。 与 传统 的 代码 编程 不 同 ，App Inventor 中 程序 是 通过 可 视 化 的 指令 模块 来 实现 的 ， 并 用 模块 定义 不 同 的 功能 。App Inventor 模 块 的 理论 最 初 基于 Ricarose Roque 的 硕士 论文 ， 而 模块 的 实现 又 基于 
另 一 位 MIT 教 育 项 目 负责 人 Eric Klopfer 创 造 的 StarLogo[l' 模 拟 程序 。2010 年 12 月 5 日 App Inventor 对 外 公测 。2012 年 1 月 1 日 谷歌 由 于 业务 发 展 调整 ， 将 该 项 目 移交 给 麻 省 理工 学 院 移动 学 习 中 心 (MIT 
Center for Mobile Learning) ， 由 麻 省 理工 学 院 在 MIT 开 源 协 议 下 开放 该 项 目的 源 代 码 ， 并 提供 一 个 可 供 公共 访问 的 云端 开发 环境 。2012 年 3 月 4 日 ，MIT App Inventor 开 放 使 用 。2013 年 12 月 ， 麻 省 理 
工学 院 推出 了 新 的 App Inventor 版 本 一 一 App Inventor 2 (以 下 简称 Al2) 和 新 的 App Inventor 官 方 网 站 。 之 前 的 版 本 称 为 App Inventor Classic 或 App Inventor 1 (以 下 简称 AlI1) ， 而 且 目 前 已 经 停止 
对 App Inventor 1 提供 技术 支持 。 本 书 是 以 App Inventor 2 为 基础 进行 编写 的 。 


几乎 在 App Inventor 上 线 的 同时 ， 国 内 的 上 T 界 和 教育 界 就 注意 到 了 这 一 新 的 Android 应 用 开发 工具 ， 越 来 越 多 的 中 高 级 院 校 将 App Inventor 作 为 非 计算 机 专业 的 选修 课程 ， 如 浙江 师范 大 学 附属 中 学 、 
汕头 大 学 、 中 山大 学 、 四 川 文理 学 院 、 芜 湖 职业 科技 学 院 、 淄 博 职业 学 院 、 江 西 师范 大 学 、 哈 尔 滨 工程 大 学 、 深 圳 信息 职业 技术 学 院 、 马 鞍山 师范 高 等 专科 学 校 等 。 同 时 麻 省 理工 学 院 和 Google 中 国 大 学 一 
直 支 持 App Inventor 在 中 国 的 推广 和 发 展 ， 在 2013 年 和 2014 年 举办 了 多 期 暑期 班 ， 并 为 国内 使 用 者 专门 搭建 了 备用 服务 器 (http://contest.appinventor.mit.edu/) ， 同 时 为 推广 App Inventor 的 使 
用 ，MIT 于 2014 年 9 月 14 日 推出 中 文 版 本 ( 含 简 体 、 繁 体 ) 。 


当然 ， 编 写 程序 究竟 是 英文 好 还 是 中 文 好 ， 还 有 待 实践 ， 本 书 仍 以 英文 原版 介绍 为 主 。 

小 穹 门 交 

Al 两 个 版 本 的 区 别 

功能 区 别 : Al1 由 于 官方 不 再 开发 ， 所 以 新 组 件 没有 Al2 多 。 

代码 编辑 器 (Block Editor) 的 区 别 : Al1 是 基于 Java Web start 的 代码 编辑 器 ， 所 以 开发 者 必须 安装 JRE， 而 Al2 完 全 基于 浏览 器 ， 开 发 者 除了 浏览 器 不 需要 额外 安装 任何 软件 。 


注意 ”两 个 版 本 的 代码 不 兼容 ， 也 就 是 在 Al1 中 导出 的 项 目 ， 不 可 以 直接 导入 Al2 中 ， 两 者 的 模拟 器 也 不 兼容 。 


[1] StarLogo 最 初 源 自 MIT 媒 体 艺 术 和 科学 项 目 负 责 人 Mitchel Resnick 的 博士 论文 ，Mitchel Resnick 的 指导 老师 是 Abelson 和 Seymout Papett。Papett 是 计算 机 教育 的 先驱 ， 他 于 1963 年 进入 MIT， 并 发 明了 帮助 儿童 





学 习 编 程 的 Logo 语 言 (Scratch) 。20 世 纪 60 年 代 未 ，Abelson 在 就 读 MIT 的 研究 生 期 间 也 参与 测试 了 Logo。 编辑 注 


1.2 App Inventor 2 环境 搭建 


由 于 Al2 是 完全 基于 浏览 器 开发 安 卓 应 用 的 〈 也 叫做 云端 开发 ) ， 只 要 你 能 访问 Al2 云 端 官方 服务 器 http://ai2.appinventor.mit.edu (由 于 受 Google 揪 件 影响 ， 国 内 经 常 无 法 访问 ， 可 访问 备用 服务 器 
http://contest.appinventor.mit.edu/) ， 再 通过 以 下 三 种 方式 ， 就 可 以 快速 开发 一 个 安 卓 应 用 。 


De 


尽管 App Inventor 2 官方 是 在 线 开发 软件 ， 但 由 于 是 开源 软件 ， 一 些 程序 员 也 开发 出 了 离线 开发 包 ， 即 没有 互联 网 时 ， 本 地 也 可 使 用 。 由 于 离线 包 并 非 官 网 推出 ， 本 书 不 再 介绍 ， 有 需要 者 可 自行 下 
载 。 


方式 一 : 使 用 安 卓 设 备 ( 安 卓 手机 或 平板 电脑 ) 和 无 线 网 络 进行 开发 (强烈 推荐 ) 


这 种 方式 不 需要 你 在 计算 机 上 下 载 任何 额外 的 软件 ， 而 是 直接 在 云端 服务 器 上 开发 ， 并 通过 人 在 安 卓 设备 上 安装 MIT App Inventor Companion 配 套 App 进 行 实时 调试 ， 如 图 1-1 所 示 。 








图 1-1 Wi-Ei 真 机 开发 方式 


以 下 是 方式 一 的 步骤 。 
请 步骤 1: 下 载 安装 MIT App Inventor Companion 配 套 App 
可 以 扫描 图 1-2 中 的 二 维 码 从 谷歌 Play Store 下 载 安装 ， 这 也 是 推荐 方式 。 


另外 也 可 以 直接 下 载 APK 方 式 安 装 ， 地 址 为 http://appinv.us/xAl2cf34。 























图 1-2 AI Companion 下 载 地 址 


如 果 你 的 安 卓 手 机 或 平板 电脑 未 安装 二 维 码 扫描 App， 也 可 以 直接 到 谷歌 应 用 市 场 搜 索 “MIT App Inventor Companion ”然后 安装 。 如 果 和 希望 直接 使 用 APK 方 式 安装 ， 请 将 手机 设置 为 “信任 未 知 
源 ”， 这 在 调试 和 安装 软件 时 同样 适用 。 


依 步骤 2: 将 计算 机 和 安 卓 设备 连接 到 同一 无 线 网 络 

记 住 ， 只 有 当 计算 机 和 安装 有 配套 App 的 安 卓 设备 连接 到 同一 无 线 网 络 时， 才能 将 你 正在 开发 的 App 显 示 到 安 卓 设备 上 ， 便 于 调试 。 换 句 话说 ， 你 的 计算 机 和 安 卓 设备 必须 在 同一 局 域 网 。 
仿 打开 App Inventor 的 项 目 将 它 与 安 卓 设备 连接 

打开 App Inventor， 新 建 一 个 项 目 ， 单 击 “Project” 一 “Start New Project”， 然 后 输入 一 个 项 目 名 称 (只 能 使 用 英文 字母 、 数 字 或 下 划 线 组 成 项 目 名 称 ) 。 


接 下 来 在 Al2 浏 览 器 的 项 部 菜单 中 选择 “Connect” 一 “Al Companion”， 如 图 1-3 所 示 。 
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图 1-3 AI Companion 连 接 


然后 浏览 器 中 会 出 现 一 个 二 维 码 对 话 框 。 使 用 你 的 安 卓 设 备 像 打 开 其 他 应 用 一 样 的 方式 开局 Al Companion 应 用 。 然 后 单 击 “Scan QR code” 按 钮 开始 扫描 浏览 器 中 的 二 维 码 ， 如 图 1-4 所 示 。 
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图 1-4 ”扫描 二 维 码 


几 秒 钟 之 后 ， 正 在 开发 的 App 就 会 显示 在 安 卓 设备 上 了 。 在 Designer 或 Blocks 界 面 做 了 修改 之 后 ， 安 卓 设备 会 即时 更 新 你 的 App， 这 种 特性 叫做 “实时 调试 ”。 


假如 你 的 手机 没有 摄像 头 ， 或 者 其 他 原因 导致 无 法 扫描 ， 你 也 可 以 直接 将 二 维 码 对 话 框 中 “Your code is” 下 面 的 6 个 字母 输入 安 卓 设备 中 打开 的 配套 App 的 输入 框 “Six Dight Code” 中， 然后 单 
击 “connect with code” 按钮 。 


假如 你 设计 的 App 没 有 显示 在 安 卓 设 备 上 ， 可 能 原因 如 下 : 

. 你 的 配套 App 已 经 过 期 ， 需 要 更 新 。 按 步骤 1 的 方法 重新 安装 即 可 。 

. 你 的 安 草 手机 或 平板 电脑 没有 连接 到 Wi-Fi。 确 认 你 的 配套 App 下 方 显示 了 网 络 IP 地 址 。 

. 你 的 安 车 设备 没有 和 计算 机 连接 到 同一 网 络 。 确 认 计算 机 和 手机 连接 的 是 同一 Wi-Fi 网 络 。 
方式 二 : 安装 并 运行 Al2 模 拟 器 


假如 没有 安 卓 手机 或 平板 电脑 ， 你 仍然 可 以 使 用 Al2 模 拟 器 来 调试 App。Al2 提 供 了 一 个 安 卓 模拟 器 ， 同 安 卓 设备 一 样 ， 但 需要 在 你 的 计算 机 上 运行 。 你 可 以 在 安 卓 模拟 器 中 调试 程序 ， 并 打包 分 发 到 其 
他 安 卓 设备 ， 甚 全 上 传 到 谷歌 Play Store。 很 多 学 校 或 课 后 兴趣 小 组 都 使 用 模拟 器 这 种 方式 来 开发 。 注 意 : 模拟 器 与 真 机 在 部 分 组 件 测试 时 可 能 有 所 不 同 。 使 用 模拟 器 来 开发 ， 需 要 首先 在 计算 机 上 安装 相 
应 的 软件 ， 步 骤 如 下 ， 如 图 1-5 所 示 。 
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图 1-5 ”使 用 模拟 器 调试 
俏 步骤 1: 在 计算 机 上 安装 App Inventor Setup 软 件 包 
下 载 软件 包 (网 址 : http://appinv.us/aisetup_windows) ， 双 击 打开 软件 包 ， 像 安装 其 他 软件 一 样 单 击 “Next” 按 钮 (注意: 必须 使 用 管理 员 权限 安装 软件 包 ) 。 


如 以 前 使 用 过 App Invnetor 1， 请 先 乞 载 软件 。 另 外 在 双击 软件 包 时 ， 可 能 会 弹出 “不 可 信任 的 发 行者 ”对 话 框 ， 请 直接 单 击 “ 确 定 ” 以 继续 。 通 常情 况 下 App Inventor Setup 软 件 可 以 自己 找到 安装 
程序 的 位 置 ， 但 假如 该 软件 询问 软件 安装 位 置 ， 直 接 输入 “C:\Program Files\Appinventor\commands-for-Appinventor” 即 可 。 如 果 你 使 用 的 是 64 位 操作 系统 ， 请 将 Program Files 替 换 成 Program 
Files (x86) 。 


S 步骤 2: 启动 aiStarter 


我 们 需要 辅助 程序 aiStarter 才 能 在 浏览 器 中 启动 模拟 器 。 该 程序 已 经 在 步骤 1 中 安装 App Inventor Setup 软 件 包 时 安装 好 了 ， 并 在 桌面 创建 了 一 个 快捷 方式 ， 如 图 1-6 所 示 。 





图 1-6 aiStattet 桌 面 图 标 


双击 该 图 标 ， 便 可 启动 辅助 程序 。 在 Windows 操 作 系统 下 该 程序 默认 开机 自 启动 。 启 动 后 将 会 出 现 图 1-7 所 示 的 窗口 。 
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图 1-7 ”aiStartet 启 动 界 面 


依 步骤 3: 打开 App Inventor 项 目 并 连接 到 模拟 器 
同方 式 一 一 样 ， 转 到 App Inventor Companion (网 址 ai2.appinventor.mitedu) ， 打 开 或 创建 一 个 项 目 。 然 后 从 App Inventor 的 顶部 菜单 中 依次 单 击 “Connenct” 一 “Emulator” 菜 单项 ， 如 图 1- 


8 所 示 。 
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图 1-8 连接 模拟 器 


浏览 器 中 央 会 弹出 一 个 对 话 框 ， 如 图 1-9 所 示 ， 告 诉 我 们 正在 连接 模拟 器 ， 可 能 需要 几 分 钟 时 间 。 


FmMulator started, warng 1U seconds to ensure all I§ running 
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图 1-9 ”连接 模拟 器 中 


同时 ，aiStarter 窗 口 会 有 一 些 更 新 的 状态 信息 ， 如 图 1-10 所 示 。 


接 下 来 出 现 模拟 器 窗口 ， 依 次 出 现 如 图 1-11 的 模拟 器 启动 过 程 。 图 1-11a 为 启动 初始 状态 ， 启 动 成 功 后 ,会 显示 图 1-11b 所 示 的 状态 。 启 动 成 功 到 可 以 显示 你 正在 开发 的 App， 可 能 还 需要 几 分 钟 时 间 ， 
这 期 间 模拟 器 会 准备 SD 卡 : 从 模拟 器 顶部 的 状态 栏 中 可 以 看 到 相应 提示 。 完 成 该 工作 后 ， 模 拟 器 就 会 启动 并 显示 你 正在 App Inventor 中 创建 的 App。 
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图 1-10 ”aiStartet 窗 口 状态 
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图 1-11 模拟 器 窗口 
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多 提示 


由 于 App Inventor 还 处 于 beta 测 试 版 ， 软 件 功 能 在 不 断 变化 ， 相 应 的 配套 软件 更 新 有 可 能 会 滞后 。 如 果 遇 到 模拟 器 有 类 似 如 图 1-12 所 示 的 画面 ， 表 示 模 拟 器 中 的 配套 软件 不 是 最 新 的 版 本 ，App 
Inventor 会 自动 更 新 它 。 
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图 1-12 更 新 模拟 器 
在 浏览 器 中 单 击 “OK” 按 钮 ， 将 会 下 载 最 新 版 的 配套 App， 然 后 自动 安装 到 模拟 器 中 。 安 装 时 ， 需 要 在 模拟 器 中 确认 替换 App。 
男 握 示 
如 果 你 正在 创建 的 App 没 有 在 模拟 器 中 显示 ， 请 从 以 下 方面 排除 故障 。 
* 确认 是 否 是 菜 一 特定 的 项 目 不 能 显示 ? 如 果 是 菜 一 项 目的 App 没 有 显示 ， 而 其 他 的 工作 正常 ， 则 可 能 是 你 的 App 有 问题 。 
.确认 是 否 有 其 他 设备 连接 到 你 的 计算 机 上 ? 因为 目前 App Inventor 2 配套 软件 只 能 处 理 一 台 设备 或 模拟 器 。 如 果 是 这 种 情况 ， 请 关闭 其 他 设备 或 模拟 器 。 


确认 你 的 配套 软件 是 装 正 确 ?App Inventot 配 套 软 件 目 录 Comtmands for App Inventor 应 该 安装 在 C:\Program Files 或 C:\Program Files (x86) ， 当 安装 目录 不 在 默认 目录 时 ， 配 套 软 件 将 不 能 启动 模拟 


“ 确定 你 的 浏览 器 是 否 运 行 了 一 些 阻止 连接 模拟 器 的 插件 ?已 知 的 一 个 名 叫 NoScript 的 Firefox 插 件 会 阻止 连接 模拟 器 ， 假 如 你 运行 了 类 似 的 插件 ， 使 用 App Inventor 时 最 好 禁用 该 插件 。 


. App Inventot 是 否 提示 你 重启 配套 App? AI 配 套 软 件 包括 运行 在 计算 机 上 的 模拟 器 、aiStatrter， 还 包括 运行 在 模拟 器 中 的 配套 App。 如 果 App Inventot 不 能 和 模拟 器 通信 ， 它 可 能 会 提示 你 重启 配套 App。 
遇 到 这 种 情况 ， 简 单 的 方法 就 是 关 挤 模拟 器 ， 然 后 重新 开始 步骤 3。 开 始 步骤 3 前 ， 需 要 单 击 “Reset Connection” 选 项 。 


你 是 否 等 了 足够 长 的 时 间 ? 模拟 器 启动 需要 一 个 过 程 ， 特 别 是 在 你 的 计算 机 配置 不 是 很 高 的 情况 下 ， 需 要 耐心 等 待 足 够 长 的 时 间 。 
介 小 窗 门 太 


模拟 器 其 实 和 真实 安 卓 设备 类 似 ， 可 以 改变 系统 语言 ， 让 界面 变 成 中 文 版 。 具 体 设 置 步骤 为 : 单 击 “Menu” ， 单 击 模拟 器 Setting， 拖 电 模 拟 器 屏幕 ， 定 位 到 Language&Keyboard 并 单 击 ， 继 续 单 击 
Select Language， 拖 曙 模 拟 器 屏幕 ， 单 击 简体 (中 文 ) 。 你 的 模拟 器 就 显示 中 文 界面 了 。 


更 改 模拟 器 分 辩 率 。 上 默认 的 模拟 器 分 辩 率 是 最 小 的 HVGA。 在 C:\Program Files\ApplnventomNcommands-for-Appinventor 目 录 ， 找 到 run-emulator.bat， 右 击 编辑 ， 在 最 下 方 找到 skin HVGA- 
Applnventor， 可 以 更 改 为 C:\Program Files\Applnventor\commands-for-Appinventor\from-Android-SDK\platforms\android-8\skins 目 录 下 的 分 辩 率 ， 如 skin WVGA854。 


方式 三 : 使 用 USB 数 据 线 连接 安 卓 手 机 或 平板 电脑 


当 你 使 用 安 卓 手机 或 平板 电脑 连接 App Inventor 时 ， 设 备 中 配套 App 管 理 着 与 计算 机 中 的 配套 软件 通过 计算 机 中 浏览 器 建立 的 连接 。 方 式 一 中 步骤 1 已 经 说 明了 如 何 安装 配套 App， 并 且说 明了 使 用 无 
线 网 络 来 建立 这 种 连接 实时 调试 应 用 是 App Inventor 官 方 推荐 的 连接 方式 。 

但 是 仍然 会 有 一 些 场所 不 提供 Wi-Fi 网 络 ， 或 者 茶 止 连接 Wi-Fi 网 络 的 设备 彼此 通信 ， 例 如 ， 某 些 学 校 、 酒 店 、 会 议 中 心 等 。 尽 管 经 验 丰富 的 计算 机 使 用 者 可 以 使 用 小 型 路 由 器 (例如 小 度 Wi-Fi、 
360Wi-Fi) 来 建立 小 型 无 线 网 络 ， 或 者 使 用 笔记 本 无 线 网 卡 提 供 小 型 无 线 网 络 ， 但 是 App Inventor 还 是 提供 了 使 用 USB 数 据 线 来 连接 安 卓 手 机 或 平板 电脑 的 方式 ， 如 图 1-13 所 示 。 


在 Windows 操 作 系 统 上 使 用 USB 数 据 线 来 连接 App Inventor 和 安 卓 设备 最 大 的 不 便 就 是 安装 驱动 程序 (Mac 和 Linux 操 作 系统 不 需要 特别 安装 驱动 程序 ) ， 并 且 不 同 厂 家 的 设备 需要 不 同 的 驱动 程序 。 
因此 ， 你 需要 查询 设备 官方 网 站 来 获取 驱动 程序 。 





a) 在 计算 机 上 创建 项 目 b) 通过 安里 设备 实时 调试 


售 步骤 1: 在 计算 机 上 安装 App Inventor Setup 软 件 包 


交 步 骤 同 方式 二 步骤 1。 


< 


SD 步骤 2: 下 载 安装 MIT App Inventor Companion 的 配套 App 


依 步骤 4: 在 计算 机 上 为 安 卓 设备 安装 驱动 程序 ， 并 打开 调试 模式 
如 之 前 所 述 ， 在 Windows 上 使 用 USB 数 据 线 调试 安 卓 应 用 ， 需 要 在 系统 设置 里 打开 开发 者 选项 ， 确 保 打开 USB 调 试 模式 。 在 Android 3.2 或 以 下 版 本 操作 系统 的 设备 上 ， 你 可 以 在 设置 一 应 用 程序 一 开 
发 者 选项 中 找到 相关 选项 ， 在 Android 4.0 或 以 上 版 本 的 设备 上 ， 相 关 选 项 直接 在 设置 一 开发 者 选项 里 。 
Pie 
Android 4.2 或 以 上 版 本 的 设备 中 ， 开 发 者 选项 默认 是 隐藏 的 。 要 使 该 选项 可 见 ， 在 设置 一 关于 手机 中 单 击 几 次 Build Number， 然 后 返回 设置 将 可 以 看 到 开发 者 选项 。 
傅 步骤 5: 使 用 USB 数 据 连 接 计算 机 和 安 卓 设备 


要 使 用 UsB 数 据 线 连接 安 卓 设备 并 调试 应 用 ， 需 要 为 安 卓 设备 安装 驱动 程序 。 安 卓 设 备 连 接 计 算 机 有 很 多 种 模式 ， 比 如 大 容量 存储 设备 模式 、 多 媒体 设备 模式 ， 甚 全 上 网 卡 模 式 。App Inventor 官 方 建 
议 使 用 大 容量 人 存储 设备 模式 来 连接 计算 机 ， 并 安装 相应 的 驱动 程序 。 由 于 制造 安 卓 手机 或 平板 电脑 的 厂商 较 多 ， 请 仔细 阅读 说 明 书 或 在 线 支 持 网 站 来 安装 驱动 程序 。 


狗 所 示 
Android 4.2.2 版 本 或 更 新 的 操作 系统 的 设备 第 一 次 连接 到 一 台 计 算 机 时 ， 会 弹出 “是 否 允 许 USB 调 试 ”对 话 框 ， 单 击 “ 确 定 ”按钮 来 允许 这 人 台 计 算 机 连接 你 的 安 卓 设备 。 
sz 小 窍门 交 


很 多 智能 手机 助手 软件 可 以 自动 帮 你 的 安 卓 设备 安装 驱动 程序 ， 比 如 91 手 机 助手 、 吏 豆 夹 手 机 助手 等 。 安 装 这 类 手机 助手 安 卓 版 后 ， 当 你 的 设备 使 用 USB 数 据 线 连 接 到 计算 机 上 之 后 ， 助 手 将 会 自动 识 
别 设备 型 号 ， 并 下 载 相 应 驱动 程序 ， 指 导 你 打开 调试 模式 。 


依 步骤 6: 测试 你 的 连接 


使 用 浏览 器 打开 连接 测试 网 站 (http://appinventor.mit.edu/ytest/) ， 如 果 测 试 网 站 测试 通过 ( 即 没有 红色 字 出 现 ) ， 说 明 App Inventor 可 以 检测 到 你 的 测试 。 接 下 来 就 可 以 开始 制作 你 的 App 了 。 如 
果 没 通过 测试 ， 主 要 可 能 是 步骤 5 的 驱动 程序 没有 正确 安装 ， 你 可 以 向 设备 厂商 或 相关 论坛 寻求 帮助 。 


1.3 App Inventor 2 界面 


App Inventor 2 主要 有 3 个 界面 ， 第 一 个 界面 为 项 目 界 面 ， 如 图 1-14 所 示 。 
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图 1-14 项 目 界 面 


在 项 目 界面 ， 主 要 完成 项 目的 建立 、 删 除 、 导 入 、 导 出 ， 操 作 菜 单 集中 在 Project，Project 功 能 如 表 1-1 所 示 。 


英文 
My projects 
Start new project 
Import project form my computer 
Import project from a responsitory 
Delete project 


Save project 
Save project as 
Checkpomt 


Export select project to my computer 


Export all project 
Import keystore 
Export keystore 
Delete keystore 


第 二 个 界面 为 设计 界面 ， 新 建 或 单 击 任 一 项 目 后 会 进入 该 界面 ， 如 图 1-15 所 示 。 


表 1-1 Project 菜 单 


建立 新 项 目 
从 代码 库 导 人 
删除 项 日 





保 行 项目 
丸和 存 项 目 





导出 项 目 到 计算 机 
导出 全 部 项 目 
导入 密 针 

于 出 密 角 











删除 密 铂 


心肌 和 门 门生 二 





功能 
返回 项 目 突 面 
新 建 项 目 


村 入 文件 后 级 为 aia 的 项 目 


从 云 亲 于 入 
删除 


保生 
另存 为 
方便 返回 
导出 
全 部 导出 





项 目的 项 目 点 


在 应 用 商店 (Play Store) 更 
新 应 用 时 必须 使 用 同一 密 钥 
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图 1-15 设计 界面 


设计 界面 也 称 Ul 界 面 ， 也 就 是 设计 程序 外 观 ， 即 设计 用 户 直 接 看 到 的 界面 ， 该 界面 有 4 个 栏目 。 第 一 栏 为 面板 栏 (Palette) ， 用 于 选择 组 件 ， 选 取 的 组 件 需要 拖 忠 到 第 二 栏 。 第 二 栏 为 视图 栏 
(Viewer) ， 是 用 户 直 接 面 对 的 项 目 外 观 。 第 三 栏 上 方 为 组 件 栏 (Components) ， 显示 已 添加 的 组 件 ; 下 方 为 媒体 栏 (Media) ， 用 来 上 传 声 音 、 图 片 等 素材 。 第 四 栏 为 属性 栏 (Properties) ， 用 来 设 
置 组 件 的 属性 。 


第 三 个 界面 为 程序 模块 界面 ， 单 击 右 上 角 的 Blocks 进 入 ， 如 图 1-16 所 示 。Blocks 是 程序 后 台 的 模块 。 


左 侧 为 模块 栏 (Blocks) ， 用 于 将 需要 的 模块 拖 折 到 右 侧 视图 栏 。 右 侧 视 图 栏 为 程序 核心 ， 各 程序 模块 需 拼 接 在 一 起 。 视 图 栏 左下 角 显 示 和 警告 信息 ， 右 下 角 为 垃圾 桶 ， 可 以 将 不 用 的 模块 拖 到 垃圾 桶 删 
除 。 
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图 1-16 ”程序 模块 界面 
多 提示 
模块 操作 有 几 个 快捷 键 ， 如 Ctrl+ CC 复制、Ctrl+V 粘 贴 、Delete 删 除 ，Ctrl+ 刀 标 深 轮 可 放大 缩小 视图 。 将 鼠标 县 停 在 模块 上 ， 会 出 现 模块 使 用 说 明 。 


右 击 模块 ， 弹 出 菜单 如 表 1-2 所 示 ; 在 背景 空白 处 右 击 ， 弹 出 菜单 如 表 1-3 所 示 。 


表 1-2 ”模块 右键 菜单 





英文 功能 
Duplicate 复制 模块 
Add Comment 浴 加 注释 方便 日 己 和 他 人 读 惜 程序 
Collapse Block 折 革 模块 将 模块 折 羞 ， 市 省 视图 空间 
Expand Block 展开 模块 一 一 区 块 ( 折 著 后 激活 ) 
Disable Block 失 活 模块 4 本 模块 无 法 使 用 ， 用 于 调试 程序 








Delete Block Ee 祭 模 块 出 除 


Help 在 线 帮 助 网 页 


表 1-3 背景 右键 菜单 


英文 功能 


Collapse Blocks 折合 了 所 有 模块 让 省 视图 空间 
Expand Blocks 展开 所 有 模块 展开 模块 查看 模块 内 容 
Arranpse Blocks Horizontally 水 平 排列 梳 块 水 平 排列 
Airange Blocks Vertically 班 下 排列 模块 重 直 排列 


Arrange Blocks by Category 按 类 别 排列 按 类 别 排列 醒 块 
Help 在 线 带 助 网 页 





第 2 章 App Inventor 2 开发 基础 要 素 


本 章 通过 几 个 简单 的 小 程序 来 学 习 App Inventor 2 的 基本 组 件 、 指 令 和 流程 控制 语句 。 


2.1 从 Hello World 开 始 


难度 六 


在 了 解 Al2 的 基本 知识 后 ， 我 们 正式 开始 安 卓 开发 之 旅 。 按 照 传统 编程 语言 开发 ， 都 是 从 Hello World 开 始 ， 我 们 也 从 Hello World 开 始 安 卓 之 旅 。 





了 学 习 目 标 
. 掌握 AI2 开 发 App 流 程 。 
. 掌握 AI Companion 调 试 流程 。 
. 掌握 APK 打 包 安 装 流程 。 
-掌握 程序 包 导 入 导出 流程 。 
芍 作 描述 


. 手机 端 安 装 App 后 ， 打 开 后 显示 “Hello Word”， 如 图 2-1 所 示 。 
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Creepni 
Helld Weorld 


图 2-1 手机 端 显示 “Hello World 


局 小 穹 门 
不 要 忘记 开发 前 的 准备 工作 |! 
“ 注册 Google 账 号 。 备 用 服务 器 注册 相应 账号 ， 使 用 离线 开发 的 方式 开启 服务 器 。 
. 下 载 安 装 Chrome 浏 览 器 。 
.准备 一 部 安 车 手机 。 由 于 部 分 国产 手机 经 常会 出 现 一 些 英 名 其 妙 的 错误 ， 建 议 选 用 Google 旗 下 Nexus 系 列 或 三 星 、HTC 等 产 商 的 产品 。 
人 ul 设计 
1. 新 建 项 目 


1) 登录 http://ai2.appinventor.mit.edu/， 弹 出 如 图 2-2 所 示 欢 迎 界面 ， 单 击 继续 按钮 (Continue) 。 


WROTE to App lmvenmor! 





vyelcome to MIT App Invantor 2 


(sot an Androd phone or tabletr? FInd out howw to 
wetl up and connect an ANndrold device 


Doanthawe an Androd devicer FNnd out how to 
-et up and run the Androld emulater. 


[Emulator and USB connections are currently for ylac 
and wndovws only. SupPPor tor Ln ls Eomng soon) 
(SUpport for Internet Explorer 1s coming soondt 


CONtINUE : 


图 2-2 ”欢迎 界面 


2) 在 项 目 界面 (Project) 栏 单 击 新 建 项 目 (New Project) ， 如 图 2-3 所 示 。 


Project = Connect= Hulld = Help = 


MT App Inventoar 2 
A Beta 





| New Project 


图 2-3 ”新建 项 目 


弹出 命名 项 目 界面 ， 命 名 为 “HelloWorld”， 如 图 2-4 所 示 。 在 这 里 要 注意 ， 项 目 名 只 能 以 英文 字母 开头 ， 且 名 中 只 能 包括 英文 字母 、 下 划 线 和 数字 ， 不 能 包含 空格 或 中 文 。 


Create mew App Inventor propect 


十 


Project name: Hellovworld 


CaNncel 
































图 2-4 项 目 名 为 “HelloWorld” 


3) 在 左 侧面 板 (Palette) 的 用 户 界 面 (User Interface) 中 单 击 标签 (Lable) 组 件 ， 并 按 住 女 标 左 键 将 其 拖 忠 到 中 间 视 图 (Viewer) 窗口 ， 如 图 2-5 所 示 。 表 2-1 为 Hello World 的 组 件 说 明 。 
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Usar Interface : Einisplay hidrlen components in Wiewer 
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号 Ereen] 
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CheckBE ox 
DatePleker 


Imade 


LiatPicker 
List¥lew 

Notifier 
PasswordTewtBon 


Slirler 


Spinner 
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TImeP Icker 
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图 2-5 ”选取 Lable 组 件 
表 2-1 HelloWotld 的 组 件 


组 ” 件 所 属 工具 组 命 名 作 用 
ia 时 示 文 本 “Hello Wonld 


Lable 组 件 可 以 直接 在 屏幕 上 输出 文本 信息 ， 用 户 无 法 进行 修改 ， 无 法 触发 事件 ， 常 用 来 对 项 目 功 能 等 进行 描述 。 在 右 侧 的 属性 面板 (Properties) 找到 Text, 将 “Text for Label1” 修 改 为 “Hello 
World! ”， 如 图 2-6 所 示 ， 其 他 项 目 如 字体 颜色 、 大 小 、 属 性 等 在 这 里 暂 不 修改 。 这 样 HelloWorld 项 目 编 写 完成 。 


D 于 加. 上 


rm sr Et CDranarensta 醒 
人 rioperns 
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图 2-6 ”将 Lable 1 的 Text 修 改 为 “Hello World! ” 
2.Al Companion 调 试 
第 1 章 介绍 了 程序 调试 方法 有 三 种 ， 这 里 使 用 Wi-Fi 模 式 Al 配 套 App (Al Companion) 进行 调试 ， 过 程 略 。 
3. 程 序 打 包 


上 面 的 程序 只 能 你 自己 使 用 ， 如 果 你 想 分 享 给 朋友 或 上 传 到 App 市 场 ， 那 就 需要 打包 成 apk 文 件 ，App Inventor 实 现 了 一 键 打包 的 功能 ， 在 计算 机 端 单 击 “Bulid” 一 “App (save.apk to my 


computor) ”， 完 成 打包 工作 ， 如 图 2-7 所 示 。 


Project ~ Connect- Build ~ Help - 


APP LPIovIde OR code for .apk ) 


Drcreen1 ~ 加 Add Screen 
和 ApD Save .alk to ITV computer 】 





图 2-7 打包 apk 到 计算 机 


打包 过 程 如 图 2-8 所 示 ， 当 进度 条 显示 100% 后 即 可 完成 程序 打包 。 


Prograss Bar for Halloworld 








Compliling part 2 (please walt) 





图 2-8 ”打包 过 程 
这 样 我 们 的 第 一 个 HelloWorld 应 用 就 全 部 完成 了 。 这 个 过 程 中 没有 使 用 任何 代码 ， 充 分 显示 了 App Inventor 的 便利 性 。 
四 任务 结 


本 节 主 要 介绍 了 App 的 开发 、 调 试 、 打 包 流 程 ， 这 也 是 Al 开 发 的 基础 流程 ， 后 面 我 们 将 省 略 一 些 常规 步骤 ， 因 此 需要 熟练 掌握 。 这 里 提 到 的 Lable 组 件 是 介绍 的 第 一 个 组 件 (Al 中 的 基本 元 素 ) 。Lable 
组 件 常用 来 描述 软件 的 功能 ， 它 只 有 属性 ， 没 有 事件 和 方法 。 


人 自我 文 践 
1 .学习 使 用 USB 数 据 线 和 模拟 器 调试 应 用 。 


2. 设 置 HelloWorld 应 用 的 字体 属性 。 


2.2 ”漫画 书 


全 难度 太太 


很 多 同学 都 喜爱 看 漫画 书 ， 利 用 App Inventor 制 作 一 款 漫画 图 书 App， 然 后 分 享 给 你 的 好 友 ， 这 是 不 是 很 慨 意 呢 ? 在 本 节 中 ， 你 将 会 学 习 编 程 的 基本 要 素 一 一 变量 ， 以 及 更 多 丰富 的 组 件 。 





个 学 习 目 标 
. 块 编程 的 操作 。 
. 全 局 变量 的 应 用 。 
组 件 的 属性 、 事 件 和 方法 。 
“ Button、 Tmage、NNotifier、 HorizontalAtrangement 组 件 使 用 方法 。 


“ if…then…else 流 程控 制 。 


鲜 {F 务 增 术 


漫画 书 App 界 面 设计 可 参考 图 2-9， 实 现 的 功能 如 下 : 


如 果 有 3 个 苹果 ， 
你 吃 了 1 个 还 剩 几 个 ? 
J 








图 2.9 漫画 书 App 实 例 图 


" 当 应 用 开始 运行 时 ， 显 示 第 一 页 漫画 。 


` 到 达 最 后 一 页 ， 下 一 页 按钮 无 法 单 击 ， 提 示 已 到 最 后 一 页 。 
. 到 达 第 一 页 ， 上 一 页 按钮 无 法 单 击 ， 提 示 已 到 第 一 页 。 
CDUnait 
首先 找到 漫画 书 素材 ， 统 一 图 片 大 小 ， 命 名 为 1jpg、2jpg、3jpg、4jpg， 通 过 Media 面 板 上 传 。 漫 画 书 UI 界面 为 : 上 方 图 片 (Image) 显示 漫画 ， 下 方 为 上 一 页 、 下 一 页 按钮 (Button) ， 两 个 按钮 


显示 在 同一 排 。 图 2-10 显 示 了 应 用 在 设计 界面 中 的 截图 ， 按 图 来 创建 水 平 布局 (HorizontalArrangement) 组 件 ， 最 后 添加 提示 (Notifier) 组 件 。Image 的 属性 设置 为 Picture: 1.jpg，Width: 
320，Height: 250。Button1 的 属性 Text 设 置 为 “上 一 页 ”，Button2 的 属性 Text 设 置 为 “下 一 页 ”。Screen 属 性 Title 设 置 为 漫画 书 。 
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图 2-10 ”漫画 书 App UI 设计 
表 2-2 是 整个 App 所 需要 的 组 件 说 明 。 


表 2-2 ”组件 说 明 


组 。” 件 ”| 所 属 工具 组 UI 属性 
Picture: 1.]pg 
Wldth: 320 
Helcht:， 230 
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全 基础 知识 


1. 变 量 


变量 来 源 于 数学 ， 是 计算 机 语言 中 能 存储 计算 结果 或 表示 值 的 抽象 概念 。 在 Al 中 ， 变 量 首先 要 声明 ， 声 明 后 的 变量 才 可 以 通过 get 模 块 调用 。 声 明 时 需要 定义 变量 名 ， 变 量 名 要 以 英文 字母 或 下 划 线 开 
头 ， 不 能 以 数字 开头 ， 不 能 使 用 中 文 。 变 量 命名 的 原则 是 便于 理解 程序 ， 可 以 使 用 英文 或 拼音 等 简写 。Al 中 的 变量 类 型 有 数字 型 (number) 、 字 符 型 (text) 、 列 表 型 (list) 和 逻辑 型 (logic) 。 变 量 声 
明 时 需要 初始 化 赋值 ， 变 量 类 型 根据 赋值 的 类 型 来 确定 ， 如 变量 值 为 true 则 为 逻辑 型 ，empty list 为 列表 型 。 变 量 包 括 全 局 (globle) 变量 和 局 部 (local) 变量 。 全 局 变量 在 整个 App 中 都 可 以 调用 ， 而 局 部 
变量 只 能 在 事件 模块 中 调用 ， 如 图 2-11 所 示 。 


2. 属 性 


组 件 属性 是 Al 中 用 来 设置 组 件 的 大 小 、 颜 色 、 位 置 、 速 度 等 功能 ， 模 块 用 绿色 显示 。 属 性 多 为 成 对 出 现 ， 如 set Button.Text to 表示 设置 按钮 的 文本 ， 而 Button.Text 为 调用 Button 的 文本 。 组 件 属性 都 
有 其 自身 属性 ， 多 用 来 与 list 结 合 使 用 ， 如 图 2-12 所 示 。 另 外 属性 设置 可 以 在 前 端 UI 界面 设置 ， 也 可 以 在 Blocks 模 块 中 设置 ， 可 以 根据 习惯 需要 选择 ， 在 前 端 UI 设置 比较 直观 方便 ， 建 议 使 用 此 种 方法 。 





图 2-11 全 局 变量 与 局 部 变量 
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图 2-12 组件 属性 示例 
3. 事 件 


事件 类 型 是 App Inventor 的 一 个 重要 概念 ， 用 来 连接 不 同 的 程序 动作 ， 如 按钮 的 单 击 、 长 按 等 ， 当 单 击 按钮 或 满足 其 他 条 件 时 激活 其 他 的 程序 运行 ，Blocks 中 一 般 用 when...Click、do... 表 示 ， 为 瞳 黄 
色 马 蹄 形 ， 如 图 2-13 所 示 。 不 是 所 有 的 组 件 都 有 事件 类 型 。App Inventor 包 括 的 事件 类 型 见 表 2-3。 





图 2-13 事件 类 型 示例 
表 2-3 事件 类 型 


事件 类 型 举 例 
用 户 发 起 的 事件 当 用 户 单 击 Buttonl 乓 





初始 化 事件 当 应 用 启动 时 ， 执 行 …… 

计时 器 事件 当 20 毫秒 过 去 时 ， 执 行 …… 

动画 事件 当 两 个 物体 碰撞 时 ， 执 行 …… 

外 部 事件 当 手 机 收 到 短信 有 时， 执行 …… 
4: 方 法 


方法 是 直接 触发 组 件 的 一 个 内 部 程序 ， 如 隐藏 键盘 、 弹 出 对 话 框 、 保 存 数据 等 ， 不 是 所 有 的 组 件 都 有 方法 类 型 。 方 法 不 能 单独 使 用 ， 必 须 在 事件 模块 中 才能 激活 ， 模 块 中 用 紫色 来 表示 ， 如 图 2-14 所 


示 。 
5.if...then...else 流 程控 制 


任何 编程 语言 都 有 流程 控制 ，Al 中 使 用 了 简单 的 流程 控制 语句 ， 例 如 ，if...then...else 为 条 件 控制 流程 ， 满 足 if 条 件 时 ， 执 行 then 中 的 语句 ， 否 则 执行 else 中 的 语句 ， 如 图 2-15 所 示 。 


-ANCeE laDl 





图 2-14 方法 类 型 示例 





图 2-15” if:…then…else 流 程控 制 


Ox 


此 处 为 双向 条 件 控制 模块 ， 需 要 在 单 向 条 件 控制 模块 中 单 击 扩充 项 目 图 示 因 来 建立 : 拖 岛 else 模 块 到 if 模 块 中 。 





全 模块 编辑 
1. 定 义 全 局 变量 


定义 全 局 变量 number， 表 示 漫 画 书 的 页 码 ， 初 始 值 为 1。 页 码 随 着 按钮 单 击 增加 和 减少 。 操 作 方 式 为 在 Blocks 界 面 中 Variables 模 块 拖 岛 initialize global number to 到 Viewer 界 面 ， 如 图 2-16 所 示 。 





图 2-16 ”定义 全 局 变量 number 


2“ 下 一 页 ” 按 包 可 件 


当 每 次 单 击 “ 下 一 页 ”按钮 时 ， 全 局 变量 number 在 自身 数值 上 加 1， 然 后 显示 当前 页 码 图 片 ， 当 到 达 第 4 页 时 ，“ 下 一 页 ”按钮 变 成 不 可 单 击 (false) ， 同 时 显示 提示 “已 是 最 后 一 页 ”， 如 图 2-17 所 
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图 2-17 “下 一 页 ”按钮 事件 
注意 ， 上 面 的 模块 使 用 了 if...then.…else 流 程控 制 。 
3.“ 上 一 页 ”按钮 事件 


与 “下 一 页 ”按钮 的 事件 类 似 ， 如 图 2-18 所 示 。 
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图 2-18 “上 一 页 ”按钮 事件 


Osi]x 
可 以 看 到 “上 一 页 ”按钮 的 程序 和 “下 一 页 ”按钮 的 程序 基本 相同 ， 可 以 使 用 Ctrl+C、Ctrl+V (复制 粘贴 ) 的 方式 ， 复 制 完成 后 在 相应 的 下 拉 荣 单 中 修改 ， 简 化 操作 。 
四 任务 外 结 


虽然 本 节 难 度 不 大 ， 但 涉及 Al 中 几 个 基本 概念 ， 即 变量 、 组 件 属性 、 事 件 和 方法 ， 以 及 流程 控制 ， 需 要 熟练 掌握 。 


〇 自我 交 中 


制作 10 页 的 漫画 书 ， 可 以 跳 转 到 任意 页 。 


2.3 ” 涂 牙 板 


全 难度 太太 
很 多 同学 喜欢 使 用 Windows 内 置 的 画图 工具 ， 其 实 手机 也 可 以 制作 一 个 简单 的 涂鸦 板 ， 让 用 户 在 手机 屏幕 上 绘制 图 画 ， 或 者 通过 拍照、 
深入 学 习 。 





全 目标 
Canvas 组 件 使 用 。 
.Slidet 组 件 使 用 。 

* 图 片 的 保存 。 

* 颜色 的 使 用 。 

` 系统 时 间 的 使 用 。 

. ImagePicket 组 件 使 用 。 
.Cameta 组 件 使 用 。 

* 横 屏 使 用 。 


: UI 布局 。 
鲍 {f 甸 描述 


涂鸦 板 App 界 面 设计 可 参考 图 2-19， 实 现 的 功能 如 下 : 


深入 





保存 “清除 ”拍照 打开 笔 和 ”| DD 





图 2-19 ”涂鸦 板 App 实 例 图 
` 模 屏 。 
` 通过 手指 在 画布 上 画 线 。 
` 选取 不 同 颜色 。 
` 通过 滑动 条 调整 画笔 粗细 。 
* 保存 涂鸦 图 像 到 指定 位 置 并 命名 。 
“ 打开 保存 的 图 像 。 


. 对 拍照 后 的 图 像 进行 涂鸦 。 
人 ul 设计 


新 建 项 目 palette，Screen 命 名 为 涂鸦 板 。 为 增 大 涂鸦 板 的 空间 ， 使 用 横 屏 操作 。 横 屏 操作 只 需 在 Screen 的 ScreenOrientation 属 性 选择 Landscape 即 可 。 布 局 采用 了 复合 布局 ， 首 先是 上 下 布局 ， 使 用 
两 个 HorizontalArrangement 分 开 。 上 方 再 分 为 左右 布局 ， 左 侧 通过 VerticalArrangement 来 选择 颜色 ， 右 侧 为 画布 区 域 。 下 方 分 别 为 保存 、 清 除 、 拍 照 按钮 、 图 片 库 组 件 、 标 签 组 件 以 及 滑 块 组 件 ， 最 后 
增加 照相 机 组 件 和 时 钟 组 件 。 注 意 体会 谋 套 布局 ， 前 端 Ul 设 计 如 图 2-20 所 示 。 
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图 2-20 ”涂鸦 板 App UI 设计 
表 2-4 是 整个 App 所 需要 的 组 件 说 明 。 


表 2-4 组 件 说 明 
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ScreenOrientation: 
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Title: 涂鸦 板 
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i User i 选取 粉色 Text: 
utton nn Pink 卫 E 上 收市 | 
Interftace 5 | Width: 30 
Helght: Fill parent 
BackeroundColor: Yellow 
User _ i. lext: 
Button Btn Yellow 选取 更 色 _ 
Interface 加 Width: 30 
Heieht: Fill parent 
User es Width: Fill parent 
Canvas (Canvasl 画布 区 域 . 上 
Interftace Helght: 200 
User 四 
Bnutton | Btn Save 保重 画布 Text: 保存 
Interface 
User Se i 
Button Btn Clear 清除 画布 Text: 清 | 际 
Interface 
UseT 则 用 得 放生 2 
Button Btn Camera Text: 担 照 
Interface 年 提 点 
ImagePicker ImagePickerl Text: 打开 
User ge 
Label Labell Text: 笔 刷 
Interface 
Max value: 10 
User -0 Min value: 1 
Slider _ Sliderl 调整 笔 刷 粗细 加 _ 
Interface ThumbPosition: 5 
Width: 1530 
User 调用 系统 时 间 攻 
Clock Clockl 0 , 2 默认 
Interface 命名 保存 图 片 
/ 油 用 手机 镜头 | 
Camera Medla Cameral 有 虽 \ 了 人 
全 基础 知识 


组 件 宽 高 如 何 设置 ? 


Al 组 件 的 宽 高 属性 有 3 个 选项 ， 分 别 是 自动 (Automatic) 、 填 充 父 类 (Fill parent) 和 自 定义 大 小 ， 系 统 默认 为 自动 。 自 动 一 般 为 组 件 的 默认 大 小 ， 填 充 父 类 为 与 父 类 宽 高 相同 ， 如 有 Canvas 或 
Layout， 则 与 Canvas 和 Layout 相 同 ; 如 没有 ， 则 与 Screen 相同 。 自 定义 大 小 单位 为 像素 。 要 选择 合适 的 属性 ， 需 要 在 手机 中 不 断 调试 。 


人 @ 模 块 编辑 
1. 画 线 模块 


涂 牙 主要 是 通过 在 Canvas 上 的 画 线 操作 来 完成 的 ， 响 应 事件 为 Canvas 的 Dragged ( 拖 忠 ) ， 响 应 方法 为 DrawLine。Dragged 事 件 产生 3 个 坐标 参数 ， 分 别 为 start (起 始点 ) 、prev (前 一 点 ) 、 


current (当前 点 ) ， 在 涂鸦 时 需要 选用 prev 及 current 作 为 DrawLine 事 件 的 参数 ， 如 图 2-21 所 示 。 








when 


B69 call 


rasl 7™ 二 DrawLine 





叫 于 | 
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图 2-21 务 线 模块 


2. 选 取 颜 色 


当 单 击 不 同 颜色 按钮 时 ， 画 笔 颜 色 变 为 相应 的 颜色 ， 依 次 制作 5 个 按钮 事件 ， 如 图 2-22 所 示 。 
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图 2-22 ”选取 颜色 
3. 画 笔 粗 细 


调整 画笔 粗细 ， 这 里 使 用 Slider 组 件 滑动 调整 ， 根 据 滚动 条 位 置 获取 画笔 粗细 大 小 ， 如 图 2-23 所 示 。 








vhen Slider] .Positionchangea 
‘thmbPFosition 
sb 4 thmbPosition -| 


























图 2-23 ”调整 画笔 粗细 


4. 保 存 功 能 


保存 涂鸦 完成 的 图 片 ， 可 以 通过 调用 Canvas 的 Save 方 法 ， 系 统 默认 保存 位 置 在 my documents/pictures 路 径 。 为 了 方便 ， 可 以 将 图 片 男 存 为 的 图 片 库 路 径 修改 为 dcim/camera/， 调 用 Canvas 的 
SaveAs 方 法 。 同 时 ， 为 了 能 够 保存 不 同 图 片 ， 以 系统 时 间 来 命名 ， 如 图 2-24 所 示 。 
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图 2-24 保存 图 片 


5. 清 除 画 布 


清除 画布 比较 简单 ， 直 接 调 用 Canvas 的 Clear 方 法 ， 如 图 2-25 所 示 。 


6. 拍 照 功 能 


拍照 功能 调用 Camera 的 TakePicture 方 法 ， 拍 照 完 成 后 将 画布 背景 设置 为 拍照 图 片 进行 涂鸦 ， 如 图 2-26 所 示 。 
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图 2-26 ”拍照 功能 


7. 打 开 图 库 


使 用 ImagePicker 组 件 打开 图 库 可 以 对 图 库 照 片 进行 涂鸦 ， 或 打开 已 保存 好 的 涂鸦 图 片 ， 如 图 2-27 所 示 。 
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图 2-27 ”打开 图 库 
加 人 务 4 结 
本 节 介绍 了 几 个 新 的 组 件 ， 以 及 颜色 的 使 用 方法 。 值 得 注意 的 是 UI 的 设计 ， 根 据 App 的 需求 使 用 了 横 屏 ， 应 该 合理 布局 几 个 功能 按钮 。UlI 的 设计 往往 是 使 用 者 的 第 一 印象 ， 要 做 到 美观 实用 。 
〇 自我 实 中 


画布 除了 男 线 外 还 可 以 画 点 、 画 圆 、 写 logo， 快 试 试 这 些 功能 吧 ! 是 不 是 觉得 画板 颜色 太 单调 了 ， 告 诉 你 一 个 秘密 ， 通 过 Color 的 Make a List 可 以 自 定 义 颜色 ! 


2.4 便 等 


他 难度 % 六 


几乎 每 部 手机 都 带 有 便签 或 备忘录 的 App， 这 是 因为 随 着 智能 手机 的 普及 ， 人 们 越 来 越 习 惯 通过 手机 来 记录 一 些 提醒 事项 或 众多 复杂 的 密码 ， 使 用 Al 也 可 以 制作 一 款 个 性 化 的 便签 App。 








全 学 习 目 标 
.Textbox 组 件 使 用 。 
:Listview 组 件 使 用 。 
. TinyDB 组 件 使 用 。 


:List 变量 使 用 。 


. Procedute 模 块 使 用 。 


“ 基于 用 户 体 验 的 细节 考虑 。 


便签 App 界 面 设计 可 参考 图 2-28， 实 现 的 功能 如 下 。 


下 午 开会 


明天 盾 目 习 


下 周三 足球 比赛 





图 2-28 便签 App 实 例 图 
显示 所 有 便签 内 容 。 
. 添加 新 便签 。 


“ 选择 修改 便签 。 


新 建 项 目 Memo，Screen 命 名 为 便签 。UI| 设 计 采 用 上 下 布局 ， 最 上 方 是 输入 和 显示 栏 ， 用 来 增加 和 修改 便签 ,使 用 Textbox 组 件 ; 中 间 是 功能 按钮 ， 使 用 HorizontalArrangement 和 4 个 Button 组 件 ; 

。 呈 本 ss \ 。 。 > 

滚 性 设置 > : 性 取 ; View 的 黑 

下 方 为 显示 区 域 ， 使 用 ListView 组 件 ， 最 后 添加 TinyDB 组 件 。 通 过 查阅 ListView 说 明 ， 使 用 该 组 件 时 需 将 Screen 的 Scrollable (滚动 ) 属性 设置 为 false， 可 以 直接 在 面板 属性 取消 勺 选 。 由 于 ListView 的 默 
认 背 景 为 黑色 ， 为 统一 色调 ， 将 Screen 的 背景 也 设置 为 黑色 ， 前 端 UI 设 计 如 图 2-29 所 示 。 
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图 2-29 ”便签 UI 设计 


表 2-5 是 整个 App 所 需要 的 组 件 说 明 。 


表 2-5 便签 组 件 说 明 


是 从 TT 


Screen Screenl 基础 扩 前 BackeroundColor: Black 
Scrollable: 不 选 
User : 增加 修改 便签 ， Hint: 
TextBox TextBoxl We a oe z 
Interface 显示 选中 便签 Width: Fill parent 
Horlzontal Horlzontal SI 
Layout 凡 置 功能 按 钳 Width: Fll parent 
AIrrangement AIrrangement2 
User Text: 添 加 


Btn Add 站 加 便签 


Button 





Interface Width: Fill parent 


组 。 件 | 所 属 工具 组 UI 属性 





z User Text: 修改 
Button Btn Edit 履 改 介 : ER 
Interface 六 Width: Fill parent 
z User Text: 州 除 
Button 删除 便签 
Interface Width: Fill parent 
User z Text: 清空 
Button Btn Clear 清空 便签 Re 加 
Interface Width: Fill parent 
四 User a 0 a 
ListView ListView1l 显示 选择 便签 肘 认 
Interface 
TinyDB TinyDB1 永久 存 展 便签 无 
©O ki 


1.List 变 量 


List 是 Al 中 三 种 类 型 变量 之 一 ， 也 是 最 复杂 的 一 种 。 它 是 数据 的 集合 ， 不 仅 可 以 是 数字 、 文 本 ， 甚 至 还 可 以 是 组 件 本 身 。 比 较 接近 Python 语言 的 list。List 的 长 度 表示 List 中 元 素 的 多 少 ，List 不 像 其 他 语 
言 的 数组 可 以 有 键 名 ， 它 只 有 索引 。 但 与 其 他 语言 不 同 的 是 ，List 索 引 不 是 从 0 开始 ， 而 是 从 1 开始 ， 这 是 要 特别 注意 的 ， 如 果 索 引 的 值 大 于 List 的 长 度 ， 系 统 也 会 报错 。 另 外 List 支 持 替 套 形 式 ，List 中 的 子 元 
素 可 以 是 List。 由 于 list 没有 二 维 数组 的 性 质 ， 在 模仿 二 维 数组 的 功能 时 ， 一 般 采 用 两 个 List 对 应 同一 索引 的 方式 。List 可 以 方便 地 实现 列表 的 增加 、 蔡 换 、 删 除 ，Al2 中 已 经 支持 List 定 义 时 直接 进行 赋值 ， 


2.TinyDB 组 件 


TinyDB 是 Al 中 提供 的 一 个 小 型 数据 库 组 件 ， 用 来 永久 存储 用 户 信息 。 程 序 中 的 变量 是 临时 存储 ， 当 程序 关闭 时 ， 这 些 变量 将 不 复 存 在 。 而 数据 库 中 的 信息 保存 在 手机 存储 器 中 ， 将 会 永久 保存 。TinyDB 
使 用 了 最 简单 的 tag-value (标签 - 值 ) 模式 进行 一 对 一 存储 。 相 同 的 tag 值 ， 新 的 value 将 代 蔡 旧 的 value。 


3.Procedure 模 块 


函数 的 使 用 大 大 简化 了 数学 的 运算 ，Procedure 就 是 类 似 函 数 的 一 个 模块 ， 将 程序 中 需要 重复 调用 的 事件 、 方 法 打包 在 一 起 ， 需 要 使 用 时 直接 调用 ， 简 化 操作 。 同 时 ， 可 以 将 有 类 似 变量 的 部 分 抽象 为 
参数 ， 形 成 带 参 数 的 程序 。Procedure 可 以 仅 运 行事 件 、 方 法 ， 也 可 以 根据 需要 返回 一 个 值 。 如 果 你 有 其 他 编程 语言 的 基础 ， 可 以 看 出 Procedure 类 似 于 其 他 语言 的 自 定义 函数 。 


人 @ 模 块 编辑 
1. 定 义 全 局 变量 


由 于 便签 内 容 是 一 条 一 条 的 ， 可 以 用 List 保 存 所 有 便签 ， 而 便签 索引 来 对 应 每 一 条 便签 。 因 此 需要 定义 两 个 全 局 变量 ， 一 个 命名 为 memo， 初 始 值 为 空 ist， 用 来 保存 便签 内 容 ; 一 个 命名 为 index， 初 始 
值 为 1， 表 示 便 签 索引 ， 如 图 2-30 所 示 。 


| reate 已 用 站 由 lJist 





2. 程 序 初始 化 


由 于 便签 保存 在 TinyDB 数 据 库 中 ， 因 此 程序 初始 化 时 ， 需 要 先 判断 数据 库 是 否 为 空 ， 如 果 不 为 空 ， 也 就 是 已 经 保存 了 便签 ， 则 将 便签 以 ListView 的 形式 显示 出 来 ， 初 始 化 程序 可 以 调用 Screen 的 
Initialize 事 件 。 数 据 库 保存 的 tag 名 定义 为 nemo。 如 图 2-31 所 示 。 





T i 








图 2-31 初始 化 程序 
3. 显 示 模 块 


便签 的 增加 、 修 改 和 删除 都 涉及 Listview 及 数据 库 的 更 新 显示 ， 为 简化 操作 ， 定 义 名 为 show 的 Procedure， 如 图 2-32 所 示 。 第 一 行 代码 为 更 新 数据 库 内容 ， 第 二 行为 更 新 ListView 的 显示 ， 第 三 行为 将 
状态 栏 清空 ， 第 四 行为 隐藏 键盘 。 注 意 第 三 行 、 第 四 行 的 代码 是 基于 用 户 体验 的 细节 考虑 ， 删 除 它们 对 整个 程序 影响 不 大 ， 但 用 户 操作 起 来 会 不 太 方 便 ， 读 者 可 仔细 体会 。 这 也 是 App 设 计 的 一 个 重要 理 
念 ， 以 用 户 体验 为 核心 去 设计 和 编辑 程序 。 
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图 2-32 ”显示 模块 
4. 增 加 便签 


增加 便签 只 需 将 TextBox 输 入 的 内 容 作 为 iem 加 入 List 即 可 ， 最 后 调用 显示 模块 ， 如 图 3-33 所 示 。 注 意 这 种 模式 ， 默 认 新 的 元 素 将 在 List 的 最 后 ， 也 就 是 显示 在 ListView 的 最 下 端 。 而 根据 人 们 使 用 便签 
的 习惯 , 一般 将 最 新 的 内 容 放 在 最 前 ， 因 此 使 用 如 图 2-34 所 示 的 方式 更 符合 用 户 的 需求 ， 这 也 是 基于 用 户 体 验 的 细节 考虑 。 
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图 2-33 ”在 尾部 增加 便签 
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图 2-34 在 头 部 增加 便签 


首先 选中 需要 修改 的 便签 ， 这 里 使 用 ListView 的 AfterPicking 事 件 ， 同 时 获取 当前 的 索引 位 置 ， 其 次 修改 便签 ， 在 当前 索引 位 置 蔡 换 元 素 ， 最 后 仍然 是 调用 显示 模块 ， 如 图 2-35 所 示 。 
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图 2-35 ”修改 便签 


删除 便签 与 修改 便签 类 似 ， 直 接 删除 list 索 引 对 应 的 元 素 即 可 ， 如 图 2-36 所 示 。 


清空 便签 即 清空 所 有 数据 ， 包 括 变量 、ListView 和 TinyDB 中 的 所 有 数据 ， 如 图 2-37 所 示 。 
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图 2-36 ”删除 便签 





四 任务 结 
本 节 介 绍 了 Listview、TinyDB 组 件 ， 以 及 List、Procedure 的 使 用 。Procedure 是 复杂 程序 编程 的 基础 ， 需 要 熟练 掌握 。 而 这 里 提出 的 以 用 户 体验 为 核心 ， 虽 然 只 是 一 种 设计 理念 ， 但 是 需要 深入 体会 。 
全 自我 详 践 


美化 你 的 便签 ， 增 加 密码 锁 功 能 ， 加 个 时 间 标 签 ， 展 开 你 的 想象 力 ， 记 录 美 好 生活 ! 


2.5 ”数学 问题 


全 难度 
计算 器 和 数学 有 着 不 解 之 缘 ， 两 者 相互 影响 。 本 节 通 过 几 个 小 程序 来 学 习 数学 问题 在 Al 编 程 中 的 应 用 。 
合 习 目标 
-for cach 流程 控制 。 
. while 流 程控 制 。 
. 鸡 兔 同 乱 问 题 。 


. 排序 问题 。 


鸭 人 务 措 述 
本 节 的 任务 是 几 个 简单 的 小 问题 ， 相 信 你 早已 学 过 ， 那 么 用 Al 如 何 实 现 呢 ? 
. 1~100 的 求 和 。 
. 鸡 兔 同 笼 问 题 。 
- 由 小 到 大 排序 。 
由 于 本 节 重 在 模块 操作 ， 故 省 去 Ul 设计. 
全 闹 岂 编辑 
任务 一 : 1~100 的 求 和 。 
方法 1: for each 流 程 


当 单 击 Button1 时 ， 将 计算 值 输出 到 Label1 标 签 。 定 义 局 部 变量 name， 初 始 值 为 0， 使 用 for each number from.…do 模 块 ， 局 部 变量 number 将 从 1 开始 取 值 ， 每 次 步 进 值 为 1， 一 直到 100， 执 行 的 程 
序 为 局 部 变量 name 和 当前 number 变 量 相 加 后 再 赋予 name 变 量 。 最 后 注意 输出 时 ， 由 于 name 是 局 部 变量 ，set Label 模 块 只 能 放 在 in 模块 内 ， 而 不 能 放 在 in 模块 外 ， 如 图 2-38 所 示 。 








图 2-38 100 内 求 和 方法 1 模块 


方法 2: while 流 程 


定义 局 部 变量 name， 初 始 值 为 0，whlie 流 程 : 当 符 合 test 条 件 name<100 时 ， 将 循环 执行 do 中 的 模块 ， 因 此 要 注意 防止 出 现 死 循环 ， 如 图 2-39 所 示 。 与 方法 1 不 同 ， 方 法 2 定义 了 全 局 变量 um， 初始 
值 为 0， 由 于 是 全 局 变量 ，set Label 模 块 可 以 放 在 in 模块 外 。 另 外 ， 注 意 方 法 1 和 方法 2 在 同样 的 程序 中 是 可 以 存在 的 ， 尽 管 定义 了 相同 的 局 部 变量 名 name， 但 由 于 是 局 部 变量 ， 不 会 发 生 冲 突 ， 全 局 变量 不 
能 使 用 同样 的 名 称 。 当 然 ， 为 了 程序 清晰 明了 ， 尽 量 使 用 不 同 的 变量 名 。 


| 1 





图 2-39 100 内 求 和 方法 2 模块 
任务 二 : 鸡 免 同 笼 问题 。 


“ 鸡 免 同 笼 问 题 ”是 我 国 古 算 书 《孙子 算 经 》 中 著名 的 数学 问题 ， 原 文 为 “ 今 有 稚 ( 鸡 ) 免 同 笼 ， 上 有 三 十 五 头 ， 下 有 九 十 四 足 。 问 条 免 各 几何 。” 人 小学、 中 学 都 有 其 各 自 的 解法 ， 那 么 如 何 用 计算 机 
程序 来 解决 此 类 问题 呢 ? 这 里 用 Lab_Cock 输 出 鸡 的 个 数 ，Lab_Rabbit 输 出 免 的 个 数 ， 如 图 2-40 所 示 。 由 于 只 有 35 个 头 ， 那 么 无 论 是 鸡 还 是 免 最 多 都 只 有 35 只 ， 通 过 for each 从 1 到 35 的 谋 套 循环 ， 当 满足 
鸡 和 免 的 头 是 35 个 ， 脚 是 94 个 的 时 候 ， 得 到 正确 答案 ， 即 鸡 23 只 ， 免 12 只 。 如 果 人 工 用 这 样 的 方法 计算 ， 要 进行 35x35=1225 次 判断 ， 工 作 量 是 非常 巨大 的 ， 但 是 车 用 计算 机 、 手 机 电子 设备 计算 ,速度 非 
常 快 ， 上 是 眼 之 间 就 可 以 得 出 结果 ， 这 也 为 我 们 解决 数学 问题 市 来 了 新 思路 。 





图 2-40 鸡 兔 同 笼 模块 


任务 三 : 排序 问题 。 


排序 问题 为 将 5 个 正 整 数 从 小 到 大 顺序 输出 ， 计 算 机 用 到 的 排序 算法 很 多 ， 如 选择 排序 、 冒 泡 排序 等 ， 这 里 使 用 的 算法 是 : 列表 第 一 个 元 素 开始 与 后 边 4 个 元 素 比较 ， 如 果 第 一 个 元 素 大 于 后 面 的 一 个 元 
素 ， 则 两 个 元 素 交 换 ， 更 换 完成 后 再 由 第 2 个 元 素 开 始 与 后 面 3 个 元 素 比 较 ， 依 次 循环 。 每 次 更 换 顺 序 后 输出 ， 如 图 2-41 所 示 。 排 序 的 序列 为 44、34、24、14、4， 需 要 调整 顺序 为 由 小 到 大 。 更 换 元 素 时 借 
用 局 部 变量 temp， 完 成 替换 ， 蔡 换 后 输出 换行 。 最 后 经 过 11 次 更 换 ， 输 出 结果 为 : 
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图 2-41 ”排序 
44 34 24 14 4 
34 44 24 14 4 
24 44 34 14 4 
14 44 34 24 4 
4 44 34 24 14 
4 34 44 24 14 
4 24 44 34 14 
4 14 44 34 24 
4 14 34 44 24 
4 14 24 44 34 


4 14 24 34 44 
Oi 
文本 中 需要 换行 时 ， 可 使 用 \n。 
加 人 务 4 结 
本 节 介绍 了 计算 机 软件 在 数学 领域 的 应 用 和 解 题 思 路 ， 要 学 会 使 用 计算 机 的 思维 去 解决 数学 问题 。 流 程控 制 语句 for each 和 while 在 编程 中 具有 十 分 重要 的 作用 ， 需 要 仔细 体会 。 


侣 自我 文中 


1. 用 Al 计算 10 的 阶乘 。 
2. 用 Al 输 出 杨辉 三 角 。 


3. 用 冒 泡 排序 法 进行 排序 。 


第 3 草 ”多 媒体 应 用 


本 章 开发 语音 、 播 放 器 等 移动 设备 多 媒体 应 用 。 


3.1 微 电 影 


难度 六 


本 节 我 们 来 学 习 制作 一 个 微 电 影 App， 这 个 功能 在 一 些 产品 展示 时 比较 实用 ， 由 于 App Inventor 的 限制 ， 不 支持 5M 以 上 的 电影 ， 如 果 特 别 大 的 电影 ， 可 以 放 到 内 存 或 网 络 上 。 





学 习 目 标 
时 Video 组 件 。 


"Screen 组 件 。 


鸭 人 务 措 述 
微 电 影 App 界 面 设计 可 参考 图 3-1， 实 现 功能 如 下 : 
“ 播放 影片 ， 循 环 播 放 ， 暂 停 播 放 。 
“ 全 屏 播 放 ， 还 原 播放 。 
. 获取 影片 长 度 。 


调整 音量 大 小 o 


医 | 


微 电 肢 


开始 首 停 全屏 ,上 户 长 35 


5 , 





图 3-1 微 电 影 App 实 例 图 
COUnagit 


首先 找到 电影 素材 ， 安 卓 手 机 支持 播放 的 格式 一 般 为 3gp 和 mp4， 素 材 可 通过 网 络 下 载 或 视频 转换 软件 进行 转换 。 由 于 App Inventor 对 程序 素材 有 5M 的 限制 ， 不 要 选取 过 大 的 视频 ， 这 里 视频 命名 为 
movie.3gp， 仅 有 3s。 微 电影 Ul 界 面 设计 为 横 屏 ， 上 方 为 视频 显示 区 ， 使 用 VideoPlayer 组 件 ， 下 方 为 控制 区 ， 用 来 播放 、 暂 停 、 全 屏 以 及 音量 调整 ， 如 图 3-2 所 示 ， 表 3-1 为 相关 组 件 说 明 。 
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图 3-2 ” 微 电 影 UI 设计 


表 3-1 微 电 影 组 件 说 明 


昌 。 件 所 且 工 上 局 全 


AllisnHorlzontal : 
Center 
SCreen Screenl 醒 屏 标 着 ScreenOrlentatlon : 
Landscape 
Title: 位 电影 


VideoPlayer VideoPlayerl 视频 播放 各 Source: movie.3ep 






Horizontal 8 ee , 

Layout HorizontalArrangementl | 水平 布局 Width. 200 
AIrangement 
Button User Interface | Begin 开始 播放 影片 Text， 开 始 


Button Full 全 屏 播 放 Text: 









( 续 ) 
组 件 UI 属性 
Horizontal . . 
re Layout HorizontalArraneement2 | 首 量 布局 Width: 200 
Label User Interface 苘 星 Text， 音量 
Maxvalue: 100 
Slider User Intertace | Sliderl Minvalue: 0 
ThumbPosition: S0 
人 @@ 虱 块 编辑 


1. 程 序 初始 化 


在 播放 音频 或 视频 时 ， 经 常会 出 现 703 错 误 ， 主 要 原因 就 是 程序 加 载 时 还 没有 加 载 完 音频 、 视 频 就 运行 了 程序 。 避 免 这 一 错误 的 方法 就 是 程序 初始 化 时 先 加 载 素 材 ， 如 图 3-3 所 示 。 








图 3-3 ”程序 初始 化 


2. 播 放 控 制 


播放 控制 实现 按钮 单 击 时 播放 或 暂停 ， 同 时 播放 时 获取 到 影片 的 长 度 (单位 为 毫秒 ) ， 播 放 完 成 后 自动 循环 ， 这 些 功能 VideoPlayer 组 件 都 已 经 有 封装 好 的 事件 和 方法 ， 如 图 3-4 所 示 。 


.EtDuration 


rar Vi Tl 7 We ed 


BN call ‘ideoPlave . Start 





图 3-4 ”播放 控制 
.音量 控制 


音量 控制 使 用 Slider 组 件 ， 如 图 3-5 所 示 。 


.Fositionuhaneed 





图 3-5 ”音量 控制 
4. 全 屏 控 制 


全 屏 控制 需要 单 击 全 屏 按钮 时 全 屏 播 放 ， 单 击 回 退 按钮 时 退出 全 屏 。 尽 管 VideoPlayer 组 件 提供 了 全 屏 播放 的 属性 ， 但 经 测试 ， 使 用 这 一 属性 时 ， 部 分 手机 会 出 现 黑屏 、 无 法 显示 图 像 的 现象 ， 因 此 这 里 
使 用 了 播放 器 宽度 和 高 度 等 于 手机 宽 高 的 替换 方法 。 退 出 全 屏 时 ， 将 宽 高 设置 为 -1， 即 可 退出 全 屏 ， 返 回 原始 大 小 ， 如 图 3-6 所 示 。 





图 3-6 全屏 控 制 


人 @ 任 务 小 结 
本 节 难 度 不 大 ， 除 了 学 习 Videoplayer 组 件 的 使 用 ， 要 注意 Screen 组 件 的 初始 化 和 回 退 按钮 两 个 事件 (在 其 他 程序 中 使 用 广泛 ) ， 需 要 熟练 掌握 ， 
侣 自我 文中 


找到 几 个 视频 连续 剧 ， 放 在 视频 播放 器 中 ， 实 现 连续 剧 自动 顺序 播放 。 


3.2 ”电影 墙 


全 难度 汉 太 


中 
NS 
节 
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在 上 一 节 的 基础 上 ， 对 三 个 电影 进行 选择 放大 和 缩小 。 这 里 介绍 用 带 参 数 的 程序 来 简化 操作 ， 该 程序 是 根据 MIT 官 方 教程 改编 。 
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按钮 文本 变化 。 


电影 墙 App 界 面 设计 可 参考 图 3-7， 实 现 功 能 如 下 : 





图 3-7 电影 墙 App 实 例 图 


` 单 击 “ 放 大 ”按钮 ， 每 个 影片 放大 播放 ，“ 放 大 ”按钮 变 为 “缩小 ”按钮 。 
` 单 击 “ 缩 小 ”按钮 ， 每 个 影片 缩小 播放 ，“ 缩 小 ”按钮 变 为 “放大 ”按钮 。 


` 单 击 “ 全 屏 ”按钮 ， 全 屏 播 放 ， 单 击 回 退 按钮 退出 全 屏 。 


CO UI 


新 建 项 目 VideoWall， 首 先 找到 电影 素材 ，MIT 官 方 提供 的 影片 名 分 别 命名 为 bjigbuckbunny.3gp，nasa.3gp，sintel.3gp， 通 过 Media 面 板 上 传 。Ul 也 为 横 屏 布局 ， 背 景 设计 为 黑色 。 三 个 电影 的 Ul 基 
本 一 致 ， 通 过 Layout 府 套 进 行 布 局 ， 每 个 布局 中 两 个 按钮 ， 为 放大 和 全 屏 ， 如 图 3-8 所 示 ， 表 3-2 是 项 目 相关 组 件 说 明 。 
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图 3-8 ”电影 墙 UI 设计 
表 3-2 ”电影 墙 组 件 


组 件 UI 属性 
BackeroundColor: 
Black 
Screen Screenl | ScreenOrnentation: 
Landscape 


Title: 电影 墙 
































Horizontal - 
Layout Horizontal Arranegementl] 水 平 布局 | Width: Fill parent 
AIrraneement 
Vertical Arrangement Vertical Arrangement!l 巧 百 布局 | Width: Fill parent 
Source : bigbuck 
. . 0 | bunny.3e 
VideoPlayer Media VideoPlayerl 视频 播放 大 | 
Width. Fllparent 
Height: 36 
ee , e: a Text: 放 大 
Button User Interface | Resizel 放大 或 绍 小 | 
Width.: Fill parent 
Text: 全 屏 
Button User Interftace | Fulll 
Width. Fill parent 
Vertical Airangement Vertical Arrangement2 息 百 布局 | Width: Fill parent 
Source: nasa.3ep 
VideoPlayer Media VideoPlayer2 视频 播放 着 | Width: Fill parent 
Height: 36 
i a Text: 放大 
Button User Interface | Resize?2 放大 或 缩小 | . 
Width: Fill parent 
Text:， 全 屏 
Button User Interface _ . 
Width.: Fill parent 
Vertical Arrangement Vertical Arrangement3 三 百 布 局 | Width: Fill parent 


Source: sintel.3ep 
VideoPlayer Media VideoPlayer3 视频 播放 器 | Width: Fill parent 
Height: 36 









Text:， 放 kr 






Button User Interface | Resize3 放大 或 缩小 | 
Width: Fllparent 
_ Text: 全 有 屏 
Button User Interface | Full3 
Width.: Flll parent 
人 并 块 编辑 


1. 定 义 全 局 变量 


定义 全 局 变量 vid1 zoomed、vid2 zoomed、vid3 zooomed， 表 示 视 频 播放 器 是 否 缩放 ， 初 始 值 为 false， 如 图 3-9 所 示 。 


= 





图 3-9 ”定义 全 局 变量 
2. 定 义 带 参 数 程 序 


由 于 3 个 视频 在 处 理 上 是 一 样 的 ， 为 了 减少 模块 ， 我 们 可 以 使 用 带 参数 程序 (Procedure) 封装 ， 简 化 操作 ， 如 图 3-10 所 示 。 该 程序 定义 名 为 resizeVideoPlayer， 还 有 3 个 参数 ，Videoplayer、 
zoomed、button， 分 别 表示 视频 播放 器 组 件 、 是 否 缩放 变量 、 按 钮 组 件 。 注 意 理解 参数 代表 的 多 样 性 。 程 序 内 部 按照 是 否 缩放 进行 了 两 个 操作 。 如 果 没 有 放大 ， 视 频 播 放 器 高 度 为 36， 按 钮 显示 为 放大 。 
相反 ， 如 果 已 经 放大 ， 视 频 播 放 器 高 度 设 置 为 144， 按 钮 显示 为 缩小 。 
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图 3-10 ”定义 带 参 数 程序 


3. 视 频 播 放 器 放大 或 缩小 


由 于 3 个 播放 器 一 样 ， 这 里 只 显示 一 个 “缩小 ”按钮 ， 如 图 3-11 所 示 。 调 用 带 参 数 程序 ， 由 于 vid1_zoomed 初 始 变 量 为 false， 因 此 单 击 后 执行 else 模 块 部 分 ， 播 放 器 变 大 ， 按 钮 显示 改 为 缩小 。 同 时 将 
vid1_zoomed 全 局 变量 取 非 ， 变 为 true。 再 次 单 击 时 ， 执 行 then 模 块 。 注 意 两 者 的 顺序 。 
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global vidl zoomed global vidl zoomed 


图 3-11 视屏 播放 器 缩小 
4. 全 屏 及 退出 


单 击 “ 全 屏 ” 按钮， 将 视频 播放 器 全 局 属性 设置 为 true， 而 单 击 回 退 按钮 时 ， 将 3 个 播放 器 全 屏 属 性 都 设置 为 false， 退 出 全 屏 ， 如 图 3-12。 
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图 3-12 全屏 及 退出 
@{ 务 小 结 
本 节 的 重点 是 带 参数 的 程序 ， 理 解 参 数 代表 的 不 同 含义 ， 可 以 是 变量 、 组 件 以 及 组 件 属性 。 通 过 带 参数 程序 的 封装 ， 减 少 模块 代码 。 
〇 自我 实 中 
1 增加 多 个 视频 。 
2 建立 在 线 视频 服务 器 。 


3. 增 加 视频 缩放 的 动画 效果 。 


3.3” 练 耳 


全 难度 汉 太 


Al 软件 的 简易 操作 结合 专业 领域 ， 可 以 制造 出 实用 性 强 的 软件 。 练 耳 软件 是 一 款 音 乐 人 学 习 的 辅助 软件 ， 尽 管 简单 ， 但 很 实用 。 音 乐 上 的 “1，2，3，4，5，6，7” 大 多 数 人 都 知道 ， 但 是 你 能 靠 耳 
分 辨 出 来 吗 ? 


学 习 目 标 


Sound 组 件 使 用 o 


Spinner 组 件 使 用 。 


练 耳 App 界 面 设计 可 参考 图 3-13， 实 现 功能 如 下 : 

. 随机 播放 “1，2，3，4，5，6，7” 中 的 一 个 音 。 

. 在 下 拉 框 选项 中 进行 选择 。 

. 对 选择 进行 判断 ， 正 确 的 显示 正确 ， 错 误 的 显示 错误 ， 并 给 出 正确 答案 。 


ER 。 "ee 需要 多 次 反复 地 听 音 进行 练习 。 
实现 重复 播放 功能 ， 这 个 功能 在 程序 上 虽然 可 有 可 无 ， 但 是 从 专业 功能 上 来 说 是 必要 的 ， 练 耳 需 要 多 次 反复 地 听 音 进 








图 3-13 ” 练 耳 App 实 例 图 


Dungit 


新 建 项 目 ear， 找 到 “1，2，3，4，5，6，7” 的 素材 ， 命 名 为 1.mid，2.mid，3.mid，4.mid，5.mid，6.mid，7.mid， 找 到 背景 图 backJPG， 通 过 Media 上 传 。UI 界 面 比较 简单 ， 水 平 布局 加 两 个 按 
钮 ，1 个 下 拉 框 和 1 个 标签 ， 另 外 添加 Sound 多 媒体 组 件 ， 由 于 练 耳 听 的 音 比较 短 ， 所 以 这 里 使 用 Sound 而 不 是 Player 组 件 ，Player 组 件 一 般 用 来 播放 较 长 的 mp3 等 。 由 于 练 耳 软件 有 一 定 的 专业 性 ， 我 们 在 
Screenabout 添 加 简要 的 软件 使 用 说 明 ，UlI 设 计 如 图 3-14 所 示 ， 表 3-3 为 相关 组 件 说 明 。 


lay hitlder comp on erts in VB,rer | Sereen1 
Harlzorntals rra Ny em Tt | 
tr Next 


-EE 
ed Btn_Be 


恒 Brr tema 车 


| Spinnem 
RL b| Rorw 
国 " BaLInil] 





Rename Delete 


Non-visibla components 


SoLInd1 





图 3-14 练 耳 UI 设计 
表 3-3 练 耳 组件 


有 全 


Screenabout: 
恨 据 听 到 的 音 局 进行 选择 
Screen Screenl 遇 奔 BackeroundImage 
back.JPG 
Title: 练 耳 
Horizontal Horizontal _ 
Layout Width: Fill parent 
Airangement Airangementl 


播放 声音 及 | Text: 播放 
Button User Interface Btn Next i _ 
一 个 瑟 首 。 | Width: Fill parent 
Text: 重复 


Button User Interface |Btn Re 重复 播放 . 
"1dth: Fl parent 





组 。 件 | 所 属 工具 组 U1 属性 


选择 听 到 的 | ElementsFromString: 
1 2,3.4,3,.0,7 

显示 正确 | Text: 

Width: Fill parent 


Sound 播放 声音 _| 默认 


全 并 块 编 得 







Spinner User Intertace 


Label User Interface Labell 





1. 定 义 全 局 变量 


定义 全 局 变量 random ， 初 始 值 为 0， 表 示 随 机 数 ， 如 图 3-15 所 示 。 





2. 程 序 初 始 化 


程序 初始 化 先 将 播放 的 音频 加 载 一 遍 ， 防 止 出 现 703 错 误 ， 如 图 3-16 所 示 。 


dc | for each 
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图 3-16 ”程序 初始 化 
3. 播 放声 音 


播放 声音 时 ， 每 次 获取 1~ 7 的 随机 函数 ， 并 将 声音 组 件 的 播放 源 设 置 为 随机 数 对 应 的 音符 ， 然 后 进行 播放 ， 重 复 播放 时 声音 源 不 变 ， 直 接 进 行 播放 ， 如 图 3-17 所 示 。 
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图 3-17 播放 声音 
4. 判 断 对 错 


根据 下 拉 框 选择 的 选项 对 应 随机 数 的 全 局 变量 ， 如 果 正 确 ， 标 签 显示 正确 ; 否则 显示 错误 ， 同 时 显示 正确 答案 ， 如 图 3-18 所 示 。 


Sl ' = 一 全: 
wl | | be] i 入 遇 i | Ms | 








图 3-18 判断 对 错 


@{ 务 小 结 

本 节 通 过 声音 组 件 ， 制 作 了 简单 的 练 耳 软件 ， 注 意 体会 软件 实用 性 的 特点 。 
〇 自我 实 中 

1. 使 用 钢琴 键 进行 音符 选择 。 


2. 增 加 低音 、 高 音 音符 。 


3.4 ”语音 输入 


全 难度 太太 


手机 不 同 于 计算 机 的 一 个 特性 就 是 自 带 麦克 ， 由 于 手机 输入 速度 较 慢 ， 特 别 是 对 于 老年 人 来 说 ， 用 语音 输入 可 以 大 大 方便 人 们 的 使 用 。 




















.SpeechRecognizef 组 件 使 用 。 


. Sharing 组 件 使 用 。 


语音 输入 App 界 面 设计 可 参考 图 3-19， 实 现 功能 如 下 : 
. 单 击 “点击 后 说 话 ” 按 钮 后 进行 语音 输入 。 


. 语音 输入 完成 后 自动 弹出 分 享 程序 ， 可 进行 发 短信 、 邮 件 、 微 博 等 。 


Eh 


路 信人 





图 3-19 ”语音 输入 App 实 例 图 
人 ul 设计 


新 建 项 目 Voicelnput。UlI 十 分 简单 ， 只 有 一 个 按钮 ， 居 中 设置 ， 进 行 美 化 ， 然 后 添加 SpeechRecognizer 组 件 和 Sharing 组 件 ， 如 图 3-20 所 示 ， 表 3-4 为 相关 组 件 说 明 。 


panents In WY leveer | 刁 _] gereen1 


电 SpeechRecognizerl 


= Sharind1 


Rename | Delete 
Non-vEible egmpene nts 
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EpeechRAecognizerl haringl 





图 3-20 ”语音 输入 UI 设计 


表 3-4 语音 输入 组 件 说 明 


组 。” 件 | 所 属 工具 组 U1 属性 


AlienHorizontal: 
Center 
AlienVertical: 
Screen Screenl - 

Center 

Scrollable 不 选 
Title: 讲 首 输入 
BackeroundColor: 
Magenta 
FontSilze: 28 
Button User Interface Buttonl Shape: oval 
Text: 点 击 后 说 话 
Width: 200 
Height: 200 





Speech Speech 
Medla 
Recognizer Recopnizerl 
Sharing Soclal Sharingl 
© st 


尽管 SpeechRecognizer 组 件 名 字 为 语音 识别 ， 但 是 它 本 身 并 没有 语音 识别 的 功能 ， 而 是 通过 调用 其 他 程序 来 实现 语音 识别 功能 ， 类 似 于 ActivityStarter。 如 果 没 有 安装 其 他 语音 识别 程序 ， 运 行 该 组 件 
的 时 候 ， 会 报错 : Activity found to handle Intent{act=android.speech.action.RECOGNIZE _ SPEECH (has extras) }。 安 卓 系 统 的 语音 识别 程序 有 Google 的 语音 搜索 以 及 百度 的 语音 助手 ， 如 图 3-21 所 
示 ， 两 个 程序 都 需要 联网 使 用 ， 并 且 都 可 以 识别 中 文 。 在 国内 由 于 Google 服 务 器 经 常 屏 蔽 ， 建 议 使 用 百度 语音 助手 。 选 取 系 统 默认 的 语音 识别 程序 可 以 在 安 卓 手机 的 系统 设置 一 语音 输入 与 输出 设置 一 语音 
识别 程序 设置 中 进行 选择 。 需 要 注意 的 是 有 一 些 山寨 手机 或 刷机 包 Rom 并 没有 这 一 选项 ， 但 并 不 一 定 是 无 法 使 用 ， 也 可 以 安装 后 直接 调用 ， 如 果 仍 然 无 法 调用 的 ， 请 安装 其 他 的 刷机 包 Rom。 





Dai du 


图 3-21 百度 语音 助手 和 google 语 音 搜索 图 标 








全 并 块 编辑 


该 程序 只 有 两 个 模块 ， 如 图 3-22 所 示 ， 单 击 按钮 后 调用 语音 识别 组 件 的 识别 方法 ， 识 别 后 将 识别 的 内 容 作为 分 享 的 信息 发 送出 去 。 分 享 组 件 的 文本 分 享 内容 会 基于 手机 系统 的 安装 程序 ， 基 本 包括 短 
言 、 蓝 牙 、 微 博 、 微 信 等 。 


二 二 ee 
| 
1 


是] 


2 =" | rg 
一 I ep"| 下 
| nizerl wl 


汪汪 


区 
时 





图 3-22 ”语音 输入 模块 


四 任务 外 结 


很 多 读者 在 使 用 语音 识别 组 件 时 遇 到 问题 ， 主 要 是 没有 安装 基础 的 语音 识别 组 件 。 也 许 有 读者 会 问 ， 既 然 安装 了 其 他 语音 识别 软件 ， 为 什么 还 要 用 这 个 组 件 ” 这 正 是 安 卓 程 序 中 Intent 的 作用 ， 即 可 以 
在 不 同 程序 中 相互 调用 ， 而 无 需 将 所 有 的 软件 都 集成 在 一 起 。 本 节 只 是 简单 地 做 了 一 个 语音 识别 后 的 分 享 ， 读 者 可 以 根据 自己 的 需要 ， 来 拓展 这 一 组 件 的 应 用 。 


〇 自我 实 中 


寻找 语音 识别 的 应 用 场景 。 


3.5 摇 一 揪 报 时 


全 难度 汉 汉 


有 了 语音 识别 功能 的 实现 ， 对 应 的 就 有 文本 转 语音 功 能 的 实现 ， 本 节 使 用 手机 摇 一 摇 的 功能 实现 语音 报时 。 

















个 学 习 目标 


.TextToSpeech 组 件 。 
Clock 组 件 时 间 显 示 。 
AccelerometerSensor 组 件 。 
针 {r 多 描 术 
摇 一 摇 报时 App 界 面 设计 可 参考 图 3-23， 实 现 功能 如 下 : 
. 屏幕 中 央 显示 当前 时 间 。 


. 摇动 手机 播报 “现在 时 间 XXXXX”。 








2014-9-2 下 午 3:08:55 


图 3-23 ” 播 一 摇 报 时 App 实 例 图 


人 ui 设计 


新 建 项 目 Time。UI 比 较 简单 ， 中 间 是 一 个 标签 ， 居 中 设置 ， 进 行 美化 ， 然 后 添加 TextToSpeech 组 件 、Clock 组 件 和 AccelerometerSensor 组 件 ， 如 图 3-24 所 示 ， 表 3-5 为 相关 组 件 说 明 。 


Doispli hicden components In Ylewmrer 


和 
“CIDck] 
i ecelerormeter SensSonr] 


= 本 TewtrTrospeech1 


Pename Celete 


Hon=visible sompomante 
(=) J - 才 
Clock] gccelerometersensorl | TextToSpeech 1 


图 3-24 ”所 一 扬 报 时 UI 设计 
表 3-5 ” 扬 一 扬 报 时 组 件 说 明 


组 件 UL 属性 


AlienHorizontal: 





Center 
AlienVertical: 
screen screenl 

Center 

Scrollable 不 选 
Title: 摊 一 择 报 时 





(经 ) 


全 作 ”| 所 局 工具 i 
FontSize: 28 
Text: 





Label User Intertace | Lablel 显示 当前 时 间 


TextToSpeech TextToSpeech!l 文本 转 培 音 
Clock Clock 1 
AccelerometerSensor AccelerometerSensor 1 


全 基础 知识 








TextToSpeech 组 件 默 认 调用 的 是 安 卓 的 Pico TTS 引 警 ， 但 是 该 引擎 不 支持 中 文 ， 因 此 我 们 需要 下 载 中 文 语音 引擎 ， 目 前 常用 的 中 文 引 警 是 讯 《 引 警 ， 请 到 应 用 商店 下 载 讯 《TT9 语 音 引擎 和 讯 飞 语音 
包 。 然 后 在 安 卓 手 机 的 系统 设置 语音 输入 与 输出 设置 一 文本 转 语音 设置 一 选择 讯 飞 语音 合成 为 默认 引擎 ， 如 图 3-25 所 示 。 讯 飞 语音 支持 男声 和 女声 ， 可 在 发 瘟 人 设置 中 选择 。 





点 认 引 斧 





Pico TTiS 


讯 飞 语音 合成 = 
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图 3-25 ”选择 讯 飞 语音 合成 为 默认 引擎 


代 模块 编辑 


该 程序 只 有 两 个 模块 ， 如 图 3-26 所 示 ，Clock 事 件 每 秒 更 新 显示 当前 的 时 间 ， 关 于 Clock 的 时 间 显 示 类 型 可 参考 附录 A (有 几 种 不 同 的 显示 类 型 ) 。Accelerometersensor 是 手机 的 加 速 传感器 ， 当 摇 一 
摇 时 触发 事件 ， 调 用 文本 转 语音 的 Speak 方 法 ， 完 成 播报 。 注 意 在 程序 运行 的 前 提 下 ， 摇 一 摇 可 以 在 手机 锁 屏 时 激活 ， 这 个 功能 使 赖 床 的 朋友 摇 一 摇 手 机 便 可 得 知 时 间 ， 而 不 用 睁 开 双 上 腿 ， 也 算是 一 个 人 性 
化 的 设计 吧 。 
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图 3-26” 摇 一 摇 报 时 
@{ 务 小 结 
文本 转 语音 作为 语音 输出 ， 可 以 丰富 软件 的 应 用 ， 如 自动 朗读 短信 、 朗 读 小 说 等 ， 特 别 适合 不 方便 阅读 时 ， 如 开车 、 做 饭 时 使 用 。 本 节 使 用 了 加 速 传感器 ， 关 于 传感器 的 更 多 知识 ， 将 在 下 一 章 介绍 。 
〇 自我 实 中 


利用 语音 识别 和 文本 转 语音 组 件 制作 一 个 聊天 机 器 人 。 


第 4 章 ”传感器 和 蓝牙 应 用 


本 章 开发 基于 传感器 (加 速度 、 位 置 、 方 向 传感器 、 时 钟 、 扫 描 ) 和 蓝牙 的 应 用 程序 。 


4.1 人 负 吃 球 


全 难度 汉 太 


很 多 人 都 玩 过 贪 吃 蛇 的 游戏 ， 本 节 我 们 制作 一 款 类 似 的 游戏 一 一 贪 吃 球 ， 即 随 着 小 球 被 吃 掉 ， 大 球 越 来 越 胖 。 通 过 游戏 主要 来 学 习 方 向 传感器 的 用 法 。 





全 学 习 目 标 
: OtrientationSensor 组 件 。 
:Ball 组件 。 
芍 { 务 措 述 
贪 吃 球 App 界 面 设计 可 参考 图 4-1， 实 现 功能 如 下 : 
. 随 着 手机 倾斜 黑 球 滚 动 ， 斜 度 越 大 ， 滚 动 速度 越 快 。 
. 黑 球 碰 到 红 球 目 ， 黑 球 增 大 ， 在 新 位 置 产生 红 球 。 
“ 黑 球 碰 到 边缘 ， 游 戏 结 来 。 


` 单 击 按钮 后 游戏 重新 开始 。 


起 省 和 10:59 轿 名 回 攻 | 11:00 


售 吃 球 





图 4-1 贪 吃 球 App 实 例 图 


全 基础 知识 


1. 手 机 传感器 
手机 传感器 已 经 成 为 智能 手机 的 标 配 ， 它 通过 芯片 来 感应 手机 的 各 项 参数 ， 如 温度 、 亮 度 、 压 力 等 。 手 机 传感器 的 种 类 越 来 越 多 ， 常 见 的 有 加 速度 传感器 、 磁 力 传感器 、 方 向 传感器 、 陀 螺 仪 、 光 线 传 
感 器 、 压 力 传感器 、 温 度 传感器 、 距 离 传感器 、 重 力 传感器 、 线 性 加 速度 传感器 、 旋 转 矢 量 传感器 、 气 压 传 感 器 等 。App Invnetor 2 中 提供 了 3 种 传感器 的 操作 ， 分 别 是 加 速度 传感器 
(AccelerometerSensor) 、 位 置 传感器 (LocationSensor) 、 方 向 传感器 (OrientationSensor) 。 

2. 方 向 传感器 

方向 传感器 稍微 有 些 难 以 理解 ， 它 可 以 监测 装置 相对 于 地 球 参考 系 的 位 置 (特别 是 ， 北 极 ) 。 方 向 传感器 获得 的 数据 是 由 磁场 传感器 与 加 速度 传感器 计算 而 来 ， 主 要 包含 以 下 三 个 参数 。 
Azimuth 方 位 角 : ( 绕 Z 轴 ) 旋转 度 。 这 是 北极 和 设备 的 Y 轴 之 间 的 夹 角 。 例 如 ， 则 设备 的 Y 轴 正 对 北极 这 个 值 是 0， 则 设备 的 Y 轴 指向 南方 这 个 值 是 180。 同 样 地 ， 当 Y 轴 指向 东方 这 个 值 是 90， 则 它 指向 
西方 这 个 值 是 270。 根 据 这 一 特性 ， 可 以 制作 指南 针 。 


Pitch ( 绕 X 轴 旋转 度 ) ， 值 的 范围 是 -90 度 到 90 度 。 水 平 为 0， 尊 头 为 负 ， 撼 尾 为 正 。 

Roll ( 绕 Y 轴 选择 ) ， 值 的 范围 是 -90 度 到 90 度 ， 水 平 为 0， 左 转 为 正 ， 右 转 为 负 。 

注意 以 上 三 个 参数 不 同 于 航海 、 航 空 的 yaw、Ppitch、roll 系 统 。 除 了 以 上 三 个 参数 ，Al2 中 的 方向 传感器 还 有 Angle 和 Magnitude ( 值 为 0~1) 两 个 参数 ， 表 示 手 机 倾斜 的 角度 和 斜 度 ， 对 应 小 球 的 方向 
和 速度 。 
人 ul 设计 


新 建 snake 项 目 ，Ul 主 界面 Canvas， 上 方 为 隐藏 的 Button ， 用 来 重新 开始 游戏 。Canvas 上 放置 两 个 小 球 ， 一 个 黑色 、 一 个 红色 ， 添 加 方向 传感器 组 件 见 图 4-2 和 表 4-1 所 示 。 
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图 4-2” 贪 吃 球 UI 设 计 


表 4-1 贪 吃 球 组 件 说 明 


一 人 | 所 RR TT 


AlsnHorlzontal : 
Center 
AlienVertical: 
Screen Screenl 本 屏 标 题 E 
Center 


Scrollable. 不 选 
Title: 贪 吃 球 

Text: 重新 开始 
Visable: Hidden 





Button User Interftace | Button!l 重新 开始 洲 戏 





BackeroundColor: 


Drawing and 
Canvas | | Canvasl 
Anlmation 


Cyan 
Width: 300 
Height: 300 





Drawine and 






Ball Balll 只] 认 
Animation 
Drawing and PaintColor: 
Ball | 
Animation Red 
OrientationSensor OrientationSensor] | 控制 小 球 于 tA 人 
全 杭 块 编辑 
1. 黑 球 滚动 


根据 方向 传感器 的 变化 ， 控 制 小 球 的 方向 和 速度 ， 由 于 Manitude 值 为 0~1， 乘 以 50 来 调整 小 球 的 速度 ， 如 图 4-3 所 示 。 


.Urientatiorn,haneed 





图 4-3 ” 黑 球 滚动 


2. 黑 球 吃 红 球 


黑 球 吃 红 球 也 就 是 两 球 的 碰撞 事件 ， 每 碰撞 一 次 ， 黑 球 的 半径 加 1， 红 球 在 画布 的 位 置 随机 出 现 ， 如 图 4-4 所 示 。 
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图 4-4 ” 黑 球 吃 红 球 


3. 游 戏 结束 


当 黑 球 碰 撞 到 画布 边缘 时 ， 游 戏 结束 ， 结 束 模 块 封装 为 over 模 块 ， 包 括 重 新 开始 按钮 可 见 、 黑 球速 度 为 0、 将 黑 球 重 置 到 画布 中 央 、 将 方向 传感器 失 活 ， 如 图 4-5 所 示 。 
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图 4-5 ”游戏 结束 
4. 重 新 开始 游戏 


单 击 按钮 后 重新 开始 游戏 ， 调 用 begin 模 块 ， 包 括 开始 按钮 隐藏 、 方 向 传感器 激活 、 黑 球 半径 还 原 ， 如 图 4-6 所 示 。 


四 任务 小 结 


本 节 介 绍 的 方向 传感器 比较 难以 理解 ， 


〇 我 实践 


制作 一 个 指南 针 。 


[1 由 于 本 书 为 黑白 印刷 ， 


4.2 图 书 扫 摘 


名 难度 六 坟 太 太 


二 维 码 、 条 形 码 已 


pz 、 _ 
学 习 目 标 





所 以 显示 不 出 红色 ， 在 图 中 显示 为 比 黑色 略 浅 的 灰色 。 


竺 深入 到 | 我们 的 生活 中 ， 


BatrcodeScanner 组 件 。 


.Screen 报错 信息 。 


" ActivityStarter 调 用 。 


: 豆 闪 API O 
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图 4-6 游戏 重新 开始 


可 以 使 用 标签 显示 方向 传感器 的 三 个 参数 来 进行 学 习 。 





编辑 注 


浏览 器 、91 助 手 等 软件 都 适应 趋势 添加 了 扫 一 扫 功 能 





。 扫 描 软件 比拼 的 已 经 不 是 识别 功能 
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， 而 是 识别 后 的 个 性 化 应 用 。 








. JSON 解 析 。 
移动 网 站 。 
芍 { 务 措 术 
图 书 扫描 App 界 面 设计 可 参考 图 4-7， 实 现 功 能 如 下 : 
. BarcodeScannet 组 件 本 身 也 没有 扫描 功能 ， 


需要 调用 开源 的 zxing 扫 描 软 件 (中文 为 条 码 扫 描 器 ) 


. 用 户 扫描 图 书 条 形 码 ， 返回 豆 办 手机 移动 端的 对 应 网 页 。 


是 否 要 安装 该 应 用 程序 ? 


全 许 安装 让 应 用 程序 : 
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ee ms 本 
4 1 
可 时 | 
rh 


= 


信息 


您 的 个 人 


候 改 副 除 SD 卡 中 | 
硬件 控件 


BP 

lad. 

| FP 
a Be 


系统 工具 


二 | 
i | 


站 未 辣 


上 一 下 一 


本 


ey 
Tr TT 


| 书 网 RMB 26.60) 





， 并 返回 扫描 结果 ， 我 们 需要 实现 没 安装 zxing 软 件 的 用 户 ， 可 以 安装 软件 ; 已 经 安装 的 直接 局 动 扫描 。 


Lm 13:47 


| 豆 连 douban 


陆 犯 鼻 训 


| 座高 畜 启 8.5 (1596. 人 二 有 有 门 


音 看 评论 


| 作者 : 严 歌 芭 


出 版 社 ; 作家 出 版 社 


| 出 版 年 ; 2014-5 


ISBEN: 9787506373753 

证 必 : 38.00 元 

以 下 网 店 有 售 : 亚 马 进 (RMB 26.50) 苏宁 易 
购 (RMB 24.00) 六 轩 网 (RMB 25.80) 北 发 图 


请 先 登录 


图 4-7 图 书 要 描 App 实 例 图 
CD Ungit 


新 建 项 目 scanner， 首 先 找到 条 码 扫 描 器 手机 软件 ( 含 zxing 内 核 ) ， 可 以 在 http://market.91.com/android/com.google.zxing.client.android.htm 网 站 进行 下 载 ， 该 软件 只 有 几 百 K， 重 命名 为 
zz.apk， 通 过 Media 面 板 进行 上 传 。UI 上 部 为 按钮 ， 启 动 扫描 组 件 ， 下 方 为 WebView 浏 览 器 ， 显 示 图 书 的 移动 站 点 。 添 加 非 可 视 组 件 Barcodescanner、Web、Activitystarter、Notifier， 如 图 4-8 和 表 4- 
2 所 示 。 
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图 4-8 ”图 书 扫 描 UI 设 计 
表 4-2 ”图书 扫描 组 件 


组 。 件 U1 属性 


AlienHorizontal: 
Screen Screenl 标题 Center 

Title: 图 书 扫 质 
Text: 扫 摘 ISBN 
Helght:， $0 








Button User Interface | Button!]l 月 动 扫 搞 





“| WA” 了 革 可 到 | 十 

Me Me a] al, 帮 俐 村 “| a ' 加 上 gm js * 

WebViewer User Interface | WebViewerl i 示人 
移动 网 站 


BarcodeScanner Selsors BarcodeScannerl 摘 


| 豆瓣 图 书 API 读 取 | 
Web Connectivity | Webl ee 中 让 


ActivityStarter ActivityStarter1 妇 疙 软件 默认 
Notifier User Interface | Notifierl 提示 信和 目 中 人 人 


全 并 块 编辑 






1. 启 动 扫描 


单 击 按钮 后 ， 启 动 扫描 组 件 ， 如 图 4-9 所 示 。 这 时 有 两 种 情况 ， 如 果 已 经 安装 条 码 扫描 器 软件 ， 则 直接 会 调用 手机 摄像 头 开始 扫描 ， 如 果 没 有 安装 软件 ， 会 提示 1501 错 误 。 


. Doscan 





图 4-9 ”启动 扫描 
2. 安 装 软件 


App Inventor 2 中 程序 的 错误 可 以 用 Screen 的 ErrorOccurred 事 件 来 处 理 ， 该 事件 有 errorNumber 参 数 ， 如 果 参 数 是 1501， 则 表示 没有 安装 软件 ， 我 们 通过 ActivityStarter 来 安装 保存 在 Media 中 的 软 
件 。ActivityStarter 调 用 需要 设置 Action、DataType、DataUri 三 个 参数 ， 注 意 DataUri 这 里 设置 的 是 调试 模式 的 路 径 ， 如 果 打 包 注 意 修改 为 file:///android asset， 同 时 激活 Notifier 的 提示 信息 ， 表 明正 在 
安装 软件 ， 如 图 4-10 所 示 。 
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图 4-10 ”安装 程序 
3. 扫 描 后 事件 


安装 完 条 码 扫描 器 后 就 可 以 正常 扫描 ， 将 手机 摄像 头 对 准 书 籍 封 底 的 条 形 码 ， 就 可 以 获取 到 书籍 的 ISBN 号 。 豆 小 计算 机 端 有 一 个 ISBN 的 URL， 即 http://book.douban.comyisbn/XXX， 通 过 测试 发 
现 ， 尽 管 可 以 显示 图 书 的 信息 ， 但 是 不 适合 手机 端 ， 只 适合 计算 机 端 显示 。 豆 办 书籍 的 移动 站 点 是 http:/m.douban.com/book/subject/XXX/， 但 没有 ISBN 的 URL， 需 要 获取 到 图 书 的 subject 号 ， 而 要 获 
取 到 ISBN 对 应 的 subject， 需 要 调用 豆 闪 的 APl。 该 API 的 地 址 为 https://api.douban.com/v2/book/isbn/XXX， 无 需 密 钥 可 直接 调用 ， 因 此 扫描 后 完成 事件 需要 使 用 Web 组 件 来 获取 API 的 数据 ， 如 图 4-11 
所 示 。 
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图 4-11 ”扫描 后 事件 


4.API 解 析 


API 返 回 的 数据 为 图 书信 息 的 JSON 格 式 ， 代 码 如 下 所 示 。 


"id":"1003078", 

"ispn10":"7505715666"， 

"ispn13":"9787505715660"， 

"title"™: "小 王子 " > 

"Grigirn, title se, 

ualt. Citler sn, 

"osubtitle"™ : Al 

"url":"http:\/\/api.douban.com\/v2\/book\/1003078", 

"alt":"http:\/\/book.douban.com\/subject\/1003078\/", 

"image":"http:\/\/imgl.douban.com\/mpic\/s1001902.jpg", 

"images":1 
"small":"http:\/\/imgl.douban.com\/spic\/s1001902.jpg", 
"Jarge":"http:\/\/imgl.douban.com\/lpic\/s1001902.jpg", 
"medium":"http:\/\/imgl .douban.com\/mpic\/s1001902.jpg" 
}, 






































vauthor .| 
"(法 ) 圣 埃 克 苏 佩 里 " 
J 

"translator":| 


" 胡 雨 苏 m 


| 
"pub] isher"™: "中 国友 谊 出 版 公司 TY > 
"pubdate":"2000-9-1", 
"rating":{"max":10, "numRaters":9438,"average":"9.1", "min":0}, 
"tags": [ 
{"count":2416, "name":" 小 王子 "}， 
{"count":1914, "name":" 童 话 "}， 
{"count":1185, "name":" 圣 埃 克 苏 佩 里 "}， 
{"count":863, "name":" 法 国 ")， 
{"count":647, "name": "经典 "}， 
{"count":597, "name":" 外 国文 学 "}， 
{"count":495, "name": "感动 "})， 
{"count":368, "name":" 帘 言 "} 























], 
"binding" : "平装 mr 
"price":"19.8", 
"pages":"111", 
"author intro":" 革 埃 克 苏 佩 里 (1900 一 1944)〉 1900 年 ， 尼 采 逝 世 。 这 一 年 ， 安 德 烈 : 纪 德 在 布鲁塞尔 一 次 会 议 上 宣称 : “当今 文学 土地 的 面貌 可 以 说 是 一 片 沼泽 。”..…. 当 地 决定 为 这 架 飞 机 的 残骸 建立 一 个 博物 馆 ， 以 他 的 : 
"summary":" 小 王子 驾到 ! 大 家 好 ， 我 是 小 王子 ， 生 活 在 B612 星 球 ， 别 看 我 是 王子 出 生 ， 我 要 做 的 事 也 不 少 … 一 法) 玛雅 : 戴 斯 特 莱 姆 "， 
"catalog" :" 序 言 : 法 兰 西 玫 瑰 \n 小 王子 \n 圣 埃 克 苏 佩 里 年 表 \n"， 
"ebook url":"http://read.douban.com/ebook/1234567/ (该 字段 只 在 存在 对 应 电子 书 时 提供 ) "， 
"ebook Price": "12.00" 



































该 API 内 容 众多 ， 是 成 对 的 JSON 格 式 ， 我 们 只 关心 的 是 subject 参 数 ， 也 就 是 jd 参数 。 将 Web 获 取 的 数据 通过 JsSON 解 析 后 ， 找 到 对 应 的 id (subject) ， 获 取 到 移动 端的 站 点 页 ， 如 图 4-12 所 示 。 
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图 4-12 ”API 解析 


全 基础 知识 


JSON (JavaScript Object Notation) 是 一 种 轻 量 级 的 数据 交换 格式 ， 易 于 读 和 编写 ， 同 时 也 易于 机 器 解析 和 生成 。 它 是 基于 JavaScript Programming Language,， Standard ECMA-262 3rd 
Edition-December 1999 的 一 个 子 集 。JSON 采 用 完全 独立 于 语言 的 文本 格式 ， 但 是 也 使 用 了 类 似 于 C 语 言 家 族 的 习惯 (包括 C、C++、C#、Java、JavaScript、Perl、Python 等 ) 。 这 些 特性 使 JSON 成 为 
理想 的 数据 交换 语言 。 

JSON 构 建 于 两 种 结构 : “名 称 / 值 ”对 的 集合 (A collection of name/value pairs) ， 不 同 的 语言 中 ， 它 被 理解 为 对 象 (object) 、 纪 录 (record) 、 结 构 (struct) 、 字 典 (dictionary) 、 哈 希 表 

(hash table) 、 有 键 列表 (keyed list) ， 或 者 关联 数组 (associative array) ， 值 的 有 序列 表 (An ordered list of values) 。 在 大 部 分 语言 中 ， 它 被 理解 为 数组 (array) 。 这 些 都 是 常见 的 数据 结构 。 
事实 上 大 部 分 现代 计算 机 语言 都 以 某 种 形式 支持 它们 。 这 使 得 一 种 数据 格式 在 同样 基于 这 些 结构 的 编程 语言 之 间 交 换 成 为 可 能 。 


JSON 具 有 以 下 这 些 形式 : 对 象 是 一 个 无 序 的 “ “名 称 / 值 ”对 ”集合 。 一 个 对 象 以 “{” ( 左 括号 ) 开始 ，“}” “( 右 括号 ) 结束 。 每 个 “名 称 ” 后 跟 一 个 “: ” (冒号 ) ; “” 名 称 / 值 ” 对 ”之 间 使 


用 “，” (逗号 ) 分 隔 。 如 : 


{"firstName":"Brett","lastName":"McLaughlin", "email":"aaaa"} 








数组 是 值 (value) 的 有 序 集合 。 一 个 数组 以 “[” ( 左 中 括号 ) 开始 ，“]” ( 右 中 括号 ) 结束 。 值 之 间 使 用 “，” (逗号 ) 分 隔 。 值 可 以 是 双 引 号 括 起 来 的 字符 串 (string) 、 数 值 (number) 、 
true、false、null， 代 码 如 下 所 示 。 


{ 

"people":[ 

{"firstName":"Brett","lastName":"McLaughlin", "email":"aaaa"}, 
{"firstName":"Jason", "JastName":"Hunter", "email":"bbbb"}, 


{"firstName":"Elliotte", "lastName":"Harold", "email":"cccc"} 

















对 象 或 者 数组 这 样 的 结构 可 以 府 套 。 进 一 步 了 解 JSON， 可 访问 http://www.json.org。 


App Inventer 2 中 的 Web 组 件 自 带 了 JSON 解 析 ， 即 JsonTextDecode 方 法 ， 配 合 Look Up in pairs 可 以 找到 对 应 的 键 值 。 
人 @{E 务 小 结 

本 节 有 一 定 难度 ， 结 合 后 面 章节 的 一 些 内 容 ， 是 一 个 综合 应 用 。 利 用 Screen 的 报错 信息 ， 可 以 处 理 一 些 程序 上 的 逻辑 问题 。Web 和 WebViewer 的 搭配 是 Al2 中 的 一 个 黄金 组 合 . 
〇 自我 实 路 

1. 利 用 扫描 组 件 读 取 网 页 地 址 进行 跳 转 。 


2. 读 取 豆 辩 API 的 其 他 信息 。 


4.3 ”开机 画面 


外 难度 六 


Clock 组 件 前 面 已 经 介绍 过 多 次 ，Clock 组 件 从 Al1 的 Interface 面 板 移 到 Sensors 面 板 ， 也 显示 了 其 的 丰富 作用 。 开 机 画面 几乎 是 所 有 程序 必 不 可 少 的 ， 可 以 是 Logo， 也 可 以 是 使 用 说 明 ， 本 节 主 要 是 学 


习 使 用 Clock 组 件 制作 开机 画面 。 


Mcrosofts 





学 习 目 标 
Clock 组 件 使 用 。 
.多 屏幕 切换 及 关闭 。 
. TinyDB 组 件 。 
Canvas 的 Flung 事 件 


任务 描述 


开机 画面 App 界 面 设计 可 参考 图 4-13， 实 现 功 能 如 下 : 


. 首次 打开 软件 时 ， 显 示 功 能 演示 ， 可 使 用 手指 滑动 切换 画面 ， 最 后 一 页 单 击 进入 程序 。 


第 二 次 打开 软件 时 ， 不 再 显示 功能 演示 ， 只 显示 Logo 画 面 ，5 秒 后 自动 跳 转 到 程序 


BM 10:58 M47 Ey 


Screen2 开机 画面 





MITasarisn Google 
App Inventor 


不 二 高 程式 也 能 以 时 你 的 App 





图 4-13 ”开机 画面 App 界 面 设计 
人 ul 设计 


新 建 项 目 start， 自 行 设计 Logo 男 面 一 张 ， 命 名 为 sjpg， 功 能 演示 画面 3 张 ， 命 名 为 1jpg、2.jpg、3.jpg， 按 钮 图 片 一 张 命名 为 startjpg， 通 过 Media 面 板 上 传 。UI 拖 岛 Canvas 组 件 加 一 个 
ImageSprite。 另 添加 TinyDB 和 Clock 组 件 。 以 上 都 是 在 Screen1 完 成 ， 进 行 开机 画面 的 设置 。 主 程序 在 Screen2， 在 标题 栏 找到 Add Screen， 添 加 新 屏幕 ， 作 为 程序 演示 ， 只 添加 一 个 Label 标 签 。 如 图 4- 


14、4-15 所 示 ， 表 4-3 为 相关 组 件 说 明 。 
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图 4-14 ”开机 画面 Scteen1 
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图 4-15 “开机 画面 Scteen2 
表 4-3 ”开机 画面 组 件 





组 ” 件 所 属 工具 组 命 ”名 Ul 属性 


AlisnHorizontal: 
Screen -一 Screenl 开机 画面 Center 
Title: 开机 上 和 面 















BackeroundImage: 1.pg 


Canvas Drawine and Animation | Canvasl 功 夏 加 和 面 百 昌 | Width: Fill parent 
Helght: 410 
Picture: 

ImageSprite | Drawine and Animation | ImageSpritel 开始 按 饵 Start.jpe 


Visible: 不 选 


TimerEnabled， 不 选 
TimerInterval: $000 


Clock Sensors Clockl 


AllenHorizontal: Center 
Screen Screen2 主 程序 AlignVertical: Center 
Scrollable: 不 选 


Text: 欢迎 


FontSize: 30 


Label User Interftace Labell 





信 模 决 编辑 
1 .定义 全 局 变量 


定义 全 局 变量 num， 初 始 值 为 1， 表 示 功 能 演示 画面 的 第 一 张 照片 ， 如 图 4-16 所 示 。 





2. 程 序 初始 化 


程序 初始 化 时 判断 是 否 首次 打开 ， 从 TinyDB 中 读 取 start 标 签 对 应 的 值 ， 如 果 没 有 值 ， 则 默认 为 true， 表 示 首 次 打开 ， 进 行 功能 演示 画面 ， 将 画布 可 见 ， 高 度 设置 为 屏幕 高 度 。 如 果 不 是 首次 打开 ， 则 隐 
藏 画 布 ， 将 屏幕 背景 设置 为 sjpg， 显 示 Logo 画 面 ， 同 时 激活 时 钟 ， 如 图 4-17 所 示 。 


3. 屏 幕 滑动 事件 
当 手 指向 左 滑动 时 (判断 Canvas 事 件 的 xvel 参 数 ) ， 依 次 播放 功能 演示 的 第 2 张 、 第 3 张 图 片 ， 当 播放 到 第 3 张 图 片 时 ， 显 示 ImageSprite， 如 图 4-18 所 示 。 
4. 进 入 主 程序 


单 击 Imagesprite 后 ， 将 TinyDB 的 start 值 保存 为 false， 表 示 已 经 不 是 首次 启动 ， 同 时 关闭 Screen1， 打 开 Screen2， 进 入 主 程序 ， 如 图 4-19 所 示 。 
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图 4-17 程序 初始 化 
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图 4-18 ”屏幕 滑动 
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图 4-19 ”进入 主 程序 


1.Close screen 和 open another screen 底 边 都 没有 播 槽 ， 因 此 两 个 程序 不 能 拼接 在 一 起 ， 可 以 通过 定义 procedure 的 方式 将 两 者 进行 拼接 。 
2. 多 屏 切 换 在 Al 配套 App 和 模拟 器 中 无 法 演示 ， 需 要 打包 APK 调 试 。 

3. 多 屏 切 换 跳 转 到 其 他 屏幕 时 不 要 忘记 关闭 当前 屏幕 。 

5 三 次 打开 


当 第 二 次 打开 程序 时 ， 由 于 TinyDB 保 存 的 Start 值 已 经 变 为 false， 因 此 将 不 再 显示 功能 画面 ， 而 直接 显示 Logo， 同 时 激活 Clock 事 件 后 ，5 秒 后 自动 跳 转 到 主 程序 ， 如 图 4-20 所 示 。 
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图 4-20 二 次 打开 


本 节 内 容 尽管 简单 ， 但 是 非常 实用 ， 并 且 每 个 程序 都 可 以 使 用 。 开 机 画面 可 以 DIY， 也 可 以 放置 广告 等 。 
人 自我 文 践 
1 制作 个 性 化 的 开机 画面 。 


2. 添 加 开机 音乐 。 


4.4 ”蓝牙 猜拳 


难度 太太 六 


App Inventor 2 集成 了 手机 蓝牙 组 件 ， 通 过 这 一 组 件 可 以 实现 手机 与 手机 间 蓝 牙 的 通信 以 及 手机 与 其 他 蓝牙 适配器 的 连接 。 本 节 通 过 一 个 蓝牙 猜拳 游戏 来 学 习 蓝 牙 的 通信 。 











学 习 目标 
: BluetoothSetvet 组 件 使 用 。 


: BluetoothClient 组 件 使 用 。 
© £40 


1. 蓝 牙 


蓝牙 是 一 种 支持 设备 短 距离 通信 (一 般 10m 内 ) 的 无 线 电 技术 。 能 在 包括 移动 电话 、PDA、 无 线 耳 机 、 笔 记 本 电脑 、 相 关外 设 等 之 间 进 行 无 线 信息 交换 。 利 用 “蓝牙” 技术， 能 够 有 效 地 简化 移动 通信 
终端 设备 之 间 的 通信 ， 也 能 够 简化 设备 与 因特网 (Internet) 之 间 的 通信 ， 从 而 数据 传输 变 得 更 加 迅速 高 效 。 赣 牙 采 用 分 散 式 网 络 结构 以 及 快 跳 频 和 短 包 技术 ， 支 持 点 对 点 及 点 对 多 点 通信 ， 工 作 在 全 球 通 
用 的 2.4GHz ISM ( 即 工业 、 科 学 、 医 学 ) 频段 。 其 数据 速率 为 1Mbps。 


2. 蓝 牙 设备 连接 

两 个 蓝牙 设备 连接 需要 以 下 几 个 步骤 。 

1) 一 个 设备 会 作为 “服务 器 ” ， 而 另 一 个 设备 则 作为 “客户 端 ”。 

2) 开局 蓝牙 功能 ， 可 在 设置 一 无 线 和 网 络 设置 一 蓝牙 设置 一 打开 监 牙 。 

3) 作为 安全 措施 ， 可 将 蓝牙 功能 设置 为 关闭、 隐藏 或 可 见 。 尝 试 连接 设备 时 ， 用 户 应 将 设备 设置 为 可 见 ， 这 样 才能 为 彼此 所 发 现 。 完 成 设备 配对 后 ， 如 果 用 户 担心 设备 会 被 其 他 设备 发 现 ， 可 以 将 设备 
设置 为 隐藏 。 

4) 扫描 碍 找 其 他 设备 ， 设 备 彼 此 发 现 对 方 后 ， 用 户 将 被 要 求 在 一 个 或 两 个 设备 中 输入 密码 。 输 入 密码 后 ， 设 备 将 彼此 验证 配对 并 完成 建立 信任 连接 。 配 对 完成 后 对 方 设 备 将 保存 在 系统 配对 名 单 中 可 在 
下 次 进行 直接 连接 ， 如 图 4-21 所 示 。 


"| 2337 


蓝 才 该 备 
GT-19000 


图 4-21 蓝牙 设备 连接 
任务 描述 
蓝牙 猜 源 App 有 些 复杂 ， 我 们 需要 将 服务 器 和 客户 端 两 个 界面 都 放 在 一 个 程序 中 ， 界 面 设计 可 参考 图 4-22， 实 现 功能 如 下 : 


. 程序 进入 后 由 用 户 选择 是 作为 服务 器 还 是 客户 端 。 





. 服务 器 开启 服务 后 等 待 连 接 ， 连 接 成 功 后 显示 连接 ， 选 择 石头 剪子 布 进行 发 送 ， 待 客户 端 也 发 送 选 择 后 进行 判断 输赢 。 
. 客户 端 连接 主机 后 ， 显 示 连 接 成 功 ， 选 择 石头 剪子 布 进行 发 送 ， 待 服务 器 也 发 送 选择 后 进行 判断 输赢 。 
. 单 击 “ 重 新 开始 ”进行 下 一 局 游戏 。 


` 单 击 “ 断 开 ”， 蓝 牙 连 接 断 开 ， 状 态 栏 给 出 提示 。 


Server Server 已 连接 


发 送 。 重新 开始 


服务 帮 宫 户 问 


3 主 王 3 
= 日 = 


server 胜 





图 4-22 蓝牙 靖 源 App 实 例 图 
COUngit 


新 建 项 目 caiquan。 准 备 好 石头 剪子 布 的 素材 ， 命 名 为 st.png、jd.png、bu.png。UI 分 为 3 个 Screen、Screen1 有 两 个 按钮 ， 选 择 服务 器 (Server) 还 是 客户 端 (Client) ; Screen2 为 Server 界 面 ， 上 
方 为 蓝牙 连接 ， 中 间 为 选择 猜 举 ， 下 方 为 猿 举 结果; Screnn3 为 Client 界 面 ， 同 Server 类 似 ， 如 图 4-23、 图 4-24、 图 4-25 所 示 ， 表 4-4 为 相关 组 件 说 明 。 
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图 4-23 ”Screen1 选 择 界面 
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图 4-24 Setvet 界 面 
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图 4-25 Client 界面 


表 4-4 ”蓝牙 猜拳 组 件 说 明 


组 ” 件 所 属 工具 组 凶 名 作 用 Ul 属性 


AlienHorizontal: 
Center 
选择 服务 胡 |AlignVertical: 
Screen Screenl i 
或 客户 端 Center 
Scrollable 不 选 
Title: 蓝 直 猜 午 


VertlicalArrangement Vertical Arrangement] 布局 上 人 


跳 转 服务 器 













Button User Interftace | Buttonl Text: Server 


Button User Interface | Button? Text: Client 


Screen 证 和 Screen2 
ti EE A Fe oh 
. 监 | 过 拉 水 
HorlzontalArrangement | Layout Horizontal Airangementl 平 布 局 
Ul Li . 日 j 


Button User Interface | Btn Ready 开局 主机 Text: 开局 主机 


.| AlienHorizontal: 
HorizontalArranegement | Layout Horizontal Arrangement2 , Center 
z Width: Fill parent 


‘Text: 


AlienHorizontal: 
Center 


Title: server 





时 人 











Button User Interftace 
Image: bu.png 





组 件 所 属 工具 组 Ul 属性 
Text: 


Button User InNtertace | Btn St 
Image: st.png 


， Text: 
Button User Interface | Btn Jd 





Imasge: Jd.pneg 





发 送 重 新 开 
a “| 默认 
始 水 平 布局 


Button 发 送 鉴 牙 数据 | Text: 发 送 

Button 新 的 一 局 Text: 重新 开始 
表格 布局 显 

示 猜 拳 结果 

Label 服务 站 Text: 服务 器 

i 窜 P | Te 客户 

Label User Interftace 尘 关 :2 上 慰 Text， 结 果 


HorizontalAiranegement | Layout HorizontalArransgement3 





TableArrangement Layout TableArrangement!l Rows: 3 





服务 冀 选 择 











[Image User Interface | Imagel me 并 人 认 
几 像 
FF = mn YY 几 -二 
各 尸 病 选择 | 
Imasge User Interface | Image2 Ri 人 





BluetoothServer BluetoothServerl 蝶 牙 服务 疾 时 凡人 


A A TE TE - 
宇和 侍 监 才 各 |TmnerEnabled; 











Clock User Interface | Clock]l 户 端 传送 数据 不 洗 
AlienHorizontal: 
Screen Screen3 客户 绵 矶 而 ”| Center 
Title: Client 
蓝牙 连接 水 | 、 
HorizontalAirangement | Layout HorlzontalAirangeinentl 黑人 


ListPicker User Interface | ListPickerl 连接 服务 角 “| Text， 连接 
Button User Interface * Text: 时 和 开 


HorizontalArraneement | Layout Horizontal Arrangement2 


.|AllenHorizontal: 
石 状 台子 布 


(enter 
Width: Fill parent 





| Text: 
Button User Interface | Bu 选择 布 
Image: bu.png 


Text: 
Button User Interface 
Image: st.png 


Text: 
Button User Interface | 
Image: ]d.png 





所 一 | 于 
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发 送 重 新 开 
始 水 平 布局 


Horizontal Arrangement | Layout Horizontal Arrangement3 并 蕉 





( 续 ) 


组 。 件 | 所 属 工具 组 U1 属性 
Button 新 的 一 局 。 | Text: 重新 开始 


& 梧 布局 卫 
TableArrangement Layout TableArraneementl . 表 桥 局 王 Rows: 3 


ra Tabell 服务 器 。 |Text， 服务 中 
pa [ET ET 


Image User Interface | Imagel 服务 训 选 择 默认 
图 像 


BluetoothClient BluetoothClientl 蓝牙 客户 端 “| 默认 


全 衙 监 直 服 |TmerEnabled， 
Clock Clock]l 王 得 蓝牙 服 


务 器 传送 数据 “| 不 先 
人 @@ 噶 决 编辑 











1.Screen1 模 块 


该 模块 完成 屏幕 跳 转 ， 如 图 4-26 所 示 。 
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图 4-26 ”Screen1 模 块 


2.Screen2 模 块 
(1) 定义 全 局 变量 


定义 全 局 变量 server、<client， 初 始 值 为 空 ， 表 示 服 务 器 和 客户 端 猜拳 的 数据 ， 全 局 变量 newgame， 初 始 值 为 true， 表 示 是 否 开 始 新 一 局 游戏 。 如 图 4-27 所 示 。 
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‘client 四 





图 4-27 定义 全 局 变量 


(2) 蓝牙 连接 和 断 开 


单 击 “ 开 局 手机 ”按钮 ， 这 样 客户 端 才 可 以 连接 服务 器 ， 服 务 器 名 字 任 意 。 当 服务 器 连接 后 ， 标 题 栏 显示 Server 已 连接 ， 同 时 激活 时 钟 组 件 。 当 断 开 连 接 后 ， 标 题 栏 显示 Server 已 断 开 ， 时 钟 失 活 ， 如 
图 4-28 所 示 。 


(3) 选择 石头 剪子 布 模块 


单 击 对 应 按钮 ， 全 局 变量 分 别 设置 对 应 的 图 片 名 ,并且 在 猜拳 结果 处 显示 图 片 。 如 图 4-29 所 示 。 
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图 4-28 ”蓝牙 断 开 和 连接 
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图 4-29 选择 石头 剪子 布 


(4) 判断 输赢 


判断 输赢 通过 时 钟 组 件 进行 。 判 断 使 用 了 3 个 并 列 条 件 ，1 是 蓝牙 保持 连接 ，2 是 服务 器 已 经 进行 选择 ， 不 为 空 值 ，3 是 为 新 的 一 局 。 当 接收 到 蓝牙 客户 端 数据 时 ， 赋 值 到 全 局 变量 client， 同 时 显示 客户 
端 选 择 的 图 片 ， 最 后 调用 udge 方 法 判断 输赢 ， 将 全 局 变量 newgame 设 置 为 false， 如 图 4-30 所 示 。 判 断 石头 剪子 布 的 算法 有 很 多 种 ， 这 里 是 先 找 出 平局 情况 ， 再 找 出 服务 器 取胜 情况 ， 剩 下 的 为 服务 器 负 
的 情况 ， 如 图 4-31 所 示 。 


(5) 发 送 数据 及 重新 开始 模块 


上 一 步 只 是 服务 器 显示 了 输赢 ， 客 户 端 还 没有 获取 到 | 数据 ， 因 此 需要 向 客户 端 发 送 蓝 牙 数据 ， 如 图 4-32 所 示 。 重 新 开始 模块 将 各 数据 清空 。 
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图 4-31 输赢 模块 
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图 4-32 发送 数 据 及 重新 开始 模块 


3.Screen3 模 块 


Screen3 模 块 是 客户 端 模 块 ， 基 本 与 服务 器 类 似 ， 不 同 之 处 在 于 连接 。 首 先 注意 的 是 两 个 手机 需要 按照 基础 知识 中 的 蓝牙 设备 连接 进行 配对 ， 否 则 客户 端 无 法 找到 服务 器 ， 其 次 要 服务 器 开启 后 ， 客 户 
端 才 可 以 进行 连接 ， 如 图 4-33 所 示 ， 手 机 端 显示 如 图 4-34 所 示 。 


. BEforeFl ckine 


wnen 


1 





图 4-33 客户 端 蓝牙 连接 
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图 4-34 选取 已 配对 设备 
其 余 模块 与 服务 器 类 似 ， 不 再 袭 述 ， 读 者 结合 模块 图 进行 学 习 。 
人 @@ 任 务 小 结 
蓝牙 连接 是 蓝牙 应 用 中 的 基础 ， 蓝 牙 应 用 可 以 扩展 两 个 手机 之 间 的 交互 应 用 。 


自我 实践 





将 石头 剪子 布 蔡 换 为 石头 剪子 布 蜥 蝎 斯 波 克 。 


4.5 ”手机 遥控 机 器 人 


全 难度 妈 坟 去 大 坟 


我 们 前 期 已 了 解 App Inventor 的 特点 ， 熟 悉 在 开发 环境 中 编辑 、 编 译 、 运 行 、 调 试 程序 的 全 过 程 。 这 里 我 们 将 通过 手机 遥控 一 台 组 装 好 的 乐高 机 器 人 ， 一 些 安 卓 手机 上 特有 的 触 碰面 板 和 特色 传感器 也 
将 在 乐高 机 器 人 得 到 功能 体现 ， 使 得 具有 蓝牙 功能 的 手机 能 与 机 器 人 通信 哦 ， 这 样 乐 高 机 器 人 就 不 再 只 是 玩具 ， 而 是 启发 思维 和 动手 能 力 的 教具 。 





0 
学 习 目 标 


“ 掌握 蓝牙 设备 间 通 信和 连接 BluetoothClient 组 件 : 用 于 建立 手机 与 乐高 机 器 人 之 间 的 蓝牙 连接 。 


“ 利用 NxtDtive 组 件 ， 对 机 器 人 驱动 轮 进行 控制 。 


" 利用 NxtUlttasonicSensot 组 件 控制 机 器 人 的 超声 波 传感器 探测 障碍 物 。 





鲜 {fF 务 增 术 


手机 遥控 机 器 人 App 界 面 设 计 可 参考 图 4-35， 实 现 功能 如 下 : 
© 




















图 4-35 ”手机 咒 控 机 器 人 App 实 例 图 


" 当 App 开 始 运 行 时 ， 单 击 “ 连 线 ” 按 钮 选择 可 以 通过 蓝牙 连 线 的 机 器 人 。 
` 控制 机 器 人 前 后 移动 。 

. 控制 机 器 人 左右 转动 。 

. 控制 机 器 人 紧急 停止 和 发 出 警报 。 


. 遥控 结束 后 ， 可 单 击 “ 断 开 连 线 ” 按 钮 结束 与 机 器 人 的 蓝牙 连接 。 


全 基础 知识 


1. 手 机 与 乐高 机 器 人 进行 蓝牙 连接 


出 于 安全 原因 ， 蓝 牙 设 备 必须 首先 配对 才能 彼此 连接 。 在 开始 构建 应 用 之 前 ， 将 机 器 人 和 手机 的 蓝牙 功能 打开 ， 完 成 手机 与 乐高 机 器 人 的 蓝牙 匹配 ， 步 骤 如 图 4-36 到 图 4-41 所 示 。 


小 穷 门 交 


若 在 课堂 进行 实验 时 ， 为 避免 选择 其 他 小 组 的 机 器 人 蓝牙 端 ， 请 选择 所 在 小 组 的 机 器 人 蓝牙 地 址 ,或 者 将 乐高 机 器 人 默认 名 字 “NXT” 改 为 可 以 识别 的 名 称 ， 下 例 中 将 乐高 机 器 人 名 称 改 为 “R1” 来 选 
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图 4-37 单 击 “搜索 设备 


要 与 
R2 


设备 配对 ， 傅 键入 该 设备 所 需 的 
PIN : 





| 
| 
| 

















通 单 为 0000 或 1234 


、J) PIN 由 字母 或 符号 组 成 


您 可 能 还 需 竖 在 访 一 台 设 备 上 辆 
| PIN。 
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图 4-38 发 现 一 台 蓝 牙 连 接 已 打开 的 乐高 机 器 人 


慢 苦 配对 ， 博 键入 该 齐备 所 斋 的 
PIN : 


| 1234 
几 忆 -加 D000 或 1234 
J PIN 由 字母 或 符号 组 成 


你 0 能 下 壳 安 在 男 一 全 设备 上 辆 
入 此 PIN。 
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图 4-39 ”输入 乐高 机 器 人 默认 的 设备 PIN 码 
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图 4-41 手机 与 机 器 人 成 功 匹 配 的 界面 


) 三 言 相 Se 人 大 和 > 生 
2. 乐 局 机 器 人 构造 


NXT 可 编程 机 器 人 套件 中 有 一 个 “NXT 智 能 积木 ” 主 单元 ， 它 可 以 控制 三 个 电机 及 四 个 输入 传感器 。 实 验 前 ， 读 者 需要 提前 将 乐高 的 齿轮 、 和 车 轮 、 电 机 、 传 感 器 和 相关 构造 元 件 一 起 组 装 好 。 如 图 4-42 
所 示 ， 这 款 机 器 人 就 是 用 乐高 MINDSTORMS NXT 2.0 套 件 组 装 的 一 个 典型 的 机 器 人 。 它 的 左 车 轮 与 输出 端口 C 相 连 ， 右 车 轮 与 输出 端口 B 相 连 ， 超 声波 传感器 与 输入 端口 4 相连 。 








图 4-42 ”实物 操作 


unagit 


新 建 项 目 robot_control_button， 为 操作 更 加 形象 ， 可 以 准备 一 些 按钮 图 片 ， 统 一 图 片 大 小 ， 命 名 为 forward.png、backward.png、right.png、left.png、sound.png， 通 过 Media 面 板 上 传 。 手 机 
遥控 机 器 人 Ul 界 面 为 : 上 方 为 “ 连 线 ”按钮 ， 下 方 为 一 个 VerticalArrangement 组 件 来 放置 除 ListPicker 以 外 的 所 有 组 件 ， 用 HorizontalArrangement 来 放置 左右 转向 、 停 车 、 喇 叭 按钮 。 当 手机 与 NXT 建 立 
蓝牙 连接 之 前 ， 应 该 隐藏 用 户 的 操作 界面 ， 为 此 设置 垂直 排版 栏 VerticalArrangement1 的 Visible 属 性 为 “hidden”″”。 当 手机 与 乐高 机 器 人 蓝牙 连通 后 ， 将 重新 显示 用 户 界 面 ， 如 图 4-43， 表 4-5 所 示 。 
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图 4-43 ”手机 遥控 机 器 人 UI 设计 
表 4-5 “手机 遥控 机 器 人 组 件 说 明 


选择 要 连接 


的 机 器 人 


Ul 属性 


组 件 所 属 工具 组 


ListPicker User Interface ListPickerConnect Text. 连 线 





Vertical Vertical oe . 

layout 纳 | 除 ListPicker | Width: Fill parent 
AIrrangement Airrangementl Sup eh 
Horizonal Horizonal 


layout dth: FI parent 


Arransement Airangementl 





Button Image: ButtonForward.pne 
Button User Interface ButtonLett Image: ButtonRlght.png 
Button 人 Imasge: Buttonstop.pnege 
Button User Interface ButtonR1ieht 石 按 Image: ButtonRiesht.pne 
Button 后 起 Image: ButtonBackward.png 
Button 发 出 喇叭 声 ”|Image: sound.png 

与 NXT 上 断 开 0 
Button User Interftace ButtonDisconnect Text: 汤 开 连 线 


连接 





Bluetooth | 
Connectivity 
Client | 
LEGO®™ 
NXtDrive 
MINDSTORMS 
LEGO®™ 
NxtDrive 
MINDSTORMS 
NxtUltrasonic | LEGO®™ 
Sensor MINDSTORMS 
NxtDirect LEGOY 
Commands |MINDSTORMS™ 
全 模块 编辑 


接 下 来 将 编程 来 设置 应 用 的 行为 ， 包 括 : 


1) 蓝牙 连接 设 定 。 


BluetoothClientl 


NxtDriveB 


NxtDriveC 


NxtUltrasonic 


Sensorl 





NxtDirect 


Commands 





以 下 代码 块 用 来 处 理 读 取 蓝 牙 装置 之 前 (如 图 4-44 所 示 ) 和 之 后 (如 图 4-45 所 示 ) 的 动作 。 


2) 控制 机 器 人 动作 ， 设 定 前 进 、 后 退 。 


建立 Android 
与 NXT 的 连接 
朱 高 机 侨 人 


款 认 


BluetoothClient: 
BluetoothClientl1 


马达 


和 所 高 机 各 人 


BluetoothClient: 
BluetoothClientl 
BluetoothClient: 
BluetoothClientl 


俭 测 障碍 物 
传感器 


dl HF 


乐高 主机 端 
功能 指令 


BluetoothClient: 
BluetoothClientl 


MoveForwardindefinitely 指 令 代 表 马 达 正 向 转 ; MoveBackwardlndefinitely 代 表 反 向 运转 ; Power 属 性 为 100 代 表 马 达 全 速 运转 ， 如 图 4-46 所 示 。 
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”和 


图 4-44 ”将 ListPickerConnect 列 表 中 的 元 件 设 定 为 设备 蓝牙 装置 清单 


ormect 
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图 4-45” 连 线 成 功 后 将 相关 控制 按钮 设置 为 可 按 


3) 通过 两 个 马达 不 同 的 驱动 运转 属性 值 来 控制 左 转 和 右 转 ， 如 图 4-47 所 示 。 
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图 4-46 ”控制 机 器 人 前 进 和 后 退 
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图 4-47 ”控制 机 器 人 左 转 和 右 转 


4) 通过 按钮 或 者 超声 波 检测 出 前 方 遇 到 障碍 控制 机 器 人 停止 运动 ， 如 图 4-48 所 示 。 


5) 让 机 器 人 发 出 喇叭 声 。 


这 里 调用 了 NxtDirectCommands 中 的 PlayTone 指 令 ， 如 图 4-49 所 示 ，frequencyHz 属 性 代表 发 出 的 声音 频率 ， 这 里 为 800MHz; durationMs 代 表 声 音 时 长 ， 这 里 为 500 毫 秒 。 





图 4-48 控制 机 器 人 停止 
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图 4-49 让 机 器 人 发 出 喇叭 声 
6) 中 断 蓝 牙 连 接 。 


最 后 是 单 击 “ 断 开 连 线 ” 按 钮 后 结束 蓝牙 通信 ， 并 回复 各 个 元 件 到 连 绪 前 的 状态 ， 如 图 4-50 所 示 。 


When .Click 


sm Bluetoothtlient .Disconnect 











图 4-50 断 开 连接 并 设置 相关 按钮 可 见 属性 


7) 对 机 器 人 进行 操作 。 


执行 程序 时 请 先 确认 机 器 人 主机 电源 与 蓝牙 都 开启 ， 然 后 单 击 手机 “ 连 线 ”按钮 ， 成 功 后 就 可 以 通过 手机 上 的 按钮 来 控制 机 器 人 了 。 


@{E 务 小 结 

本 任务 完成 了 一 个 简易 通过 手机 控制 机 器 人 的 应 用 ， 通 过 ListPicker 组 件 ， 让 我 们 可 以 从 已 配对 的 机 器 人 列表 中 进行 选择 ，BluetoothClient 组 件 使 手机 与 机 器 人 建立 连接 : 通过 NxtDrive 组 件 来 控制 机 
器 人 的 移动 、 转 向 及 停止。 
介 自我 实践 

1 利用 语音 来 控制 机 器 人 行进 。 

2 利用 触 控 来 控制 机 器 人 行进 . 

3 利用 屏幕 转动 来 控制 机 器 人 行进 。 

4 利用 屏幕 转动 来 控制 机 器 人 行进 ， 


5. 利 用 超声 波 传感器 ， 当 机 器 人 遇 到 障碍 物 时 自动 停止。 


第 ?5 章 ”动画 游戏 应 用 


动画 是 游戏 活动 的 基础 和 形式 ， 通 过 游戏 能 更 好 地 激发 大 家 的 学 习 兴趣 ， 真 正 实现 高教 于 乐 。 


5.1 打 地 鼠 


全 难度 太太 


打 地 鼠 是 一 款 简单 的 游戏 ， 当 地 鼠 从 地 洞 中 探头 时 ， 玩 家 手指 打击 地 鼠 。 这 里 我 们 通过 打 地 鼠 游 戏 来 学 习 动 画 游戏 制作 流程 和 细节 。 





合 关 习 目 标 
“ ImageSprite 组 件 使 用 。 
:Canvas 的 坐标 。 


Clock 在 游戏 中 的 应 用 。 


“ 游戏 可 玩 性 的 开发 。 
钛 {多 描述 
打 地 咎 App 界 面 设计 可 参考 图 5-1， 实 现 功 能 如 下 : 
: 单 击 “ 开 始 ” 按 钮 后 游戏 开始 。 
: 地 鼠 在 图 示 几 个 地 洞 中 随机 探头 。 
` 玩家 打 中 地 和 鼠 时 计 分 加 1， 发 出 声音 。 


:1 分 钟 后 游戏 结束 ， 统 计 击 中 次 数 。 





图 5-1 打 地 和 鼠 App 实 例 界 面 


Op 
1.Canvas 坐 标 体系 


在 Canvas 的 坐标 体系 中 左上 角 是 原点 (0，0) ， 水 平 向 右 为 X 轴 ， 逐 渐 增 加 ， 垂 直 向 下 为 y 轴 ， 逐 渐 增 加 。 对 于 Canvas 上 的 ImageSprite 组 件 ， 它 的 坐标 位 于 图 像 的 左上 角 ， 如 图 5-2 所 示 。 由 于 这 个 特 
效 ， 在 处 理 ImageSsprite 到 达 右 侧 位 置 时 ， 要 注意 坐标 换算 ， 确 保 显示 全 部 图 片 。 对 于 ImageSprite 除 了 平面 的 x、y 坐 标 ， 还 有 z 坐 标 ，z 坐 标 主要 解决 多 个 ImageSprite 上 下 层 关系 。 





图 5-2 ”Canvas 坐标 系 


2. 透 明 图 片 


在 动画 游戏 中 ， 往 往 具 有 背景 图 ， 作 为 游戏 的 显示 效果 ，lmageSprite 常 常 使 用 透明 图 片 ， 且 一 般 为 PNG 格 式 。PNG 可 以 为 原 图 像 定义 256 个 透明 层次 ， 使 得 彩色 图 像 的 边缘 能 与 背景 平滑 融合 。PNG 
图 片 一 是 可 以 通过 网 络 搜索 获取 ， 二 是 可 以 使 用 Photoshop 等 绘图 软件 进行 处 理 。 


Gu 设计 


新 建 mole 项 目 ， 首 先 找 到 地 洞 背景 和 地 鼠 素材 ， 命 名 为 back.png、mouse.png， 声 音素 材 命 名 为 bang.wav， 素 材 通 过 Media 面 板 上 传 。 游 戏 布局 分 为 三 部 分 : 上 方 为 游戏 主 界面 ， 放 置 Canvas、 
ImageSprite; 中 间 为 状态 栏 ， 统 计 击 中 次 数 ， 以 及 时 间 倒 计时 ， 使 用 4 个 Lable 和 HorizontalArrangement 组 件 ; 下 方 为 开始 按钮 ， 使 用 Button 组 件 。 最 后 添加 非 可 视 组 件 ，Sound 组 件 和 两 个 Clock 组 
件 ，1 个 Clock 用 来 绑 定 地 鼠 操 作 ，1 个 用 来 倒计时 。Ul 界 面 如 图 5-3 所 示 ， 程 序 组 件 见 表 5-1 组 件 说 明 。 





ois paw hiclden components INn Wlew er | SCreEenl 


上 Canvasl 


2 madespritel 


四 Horizontalt rranc ement] 


BA|Labell 
Ml ab_ mo 
AlLabelg 
Allab Time 
orizontals rrandgemente? 
9 tton? 
时 gouind1 








山 


Rename Delete 
Neon-visible componenmis 


snunmil]l IClockl | Clocke 











图 5-3” 打 地 鼠 UI 设 计 
表 5-1 打 地 鼠 组 件 说 明 


组 件 
Screen 
(Calvas 
ImageSprite 
Horizontal 
AIirangement 
Label 
Label 





和 a 


Canvasl 洲 戏 界面 


Dranwine and 


Animation 


Dranwine and , 
| ImageSpritel 地 羽 
Animation 





Horizontal 水 平 放 置 


Layout ER 
Alrangementl 标签 钮 


User Interface | Labell 击 中 数 


辣 | 二 一 一 二 
显示 击 


User Interface es 
中 数字 







UI 属性 
Text: 打 地 好 
AlienHorizontal: 
centor 
BackeroundImage: 
Back.pne 
Width: Fill parent 
BackeroundImage: 
Mouse.pne 
Width: $0 
Helght: $0 


Width: Fill parent 


FontSize: 25 
Text: 击 中 数 
Width: $0 
Height: $0 
FontSize: 25 
Text: 0 
Width: $0 
Height: $0 


Label 


Label 


Horlzontal 


Airangement 


Button 


Sound 


Clockl 
Clock?2 


全 模块 编辑 


1. 定 义 全 局 变量 


定义 全 局 变量 ho， 初始 值 为 0%， 表 示 击 中 次 数 ; 


所 属 工具 组 


User Intertace 


User Interface 


User Interftace 


Sellsors 





Sellsors 





Label3 


显示 倒 


Lab Time . 
计时 





Horizontal 


AIiraneement2 





Buttonl 


Clockl 


倒计时 











( 续 ) 


UI 属性 
FontSlze: 25 
Text: 时 间 
Width: $0 
Height: $0 
FontSize: 235 
Text: 60 
Width: $0 
Helght: $0 


BackeroundColor : 


(Tree 


FontSize: 32 
Text: 开始 
Width: 100 
Height: 100 


Source: bang.wav 
TimerEnabled: 不 选 


TimerInterval: $00 


TimerEnabled， 不 选 


定义 全 局 变量 sec， 初 始 值 60， 表 示 秒 数 ;定义 全 局 变量 x、y， 初 始 值 为 empty list， 表 示 地 鼠 可 能 出 现 的 X、Y 坐 标 ， 如 图 5-4 所 示 。 





2. 游 戏 开 始 模 块 


在 制作 动画 游戏 时 ， 一 般 将 游戏 开始 和 游戏 结束 做 成 Procedures， 简 化 操作 ， 方 便 维 护 。 这 里 命名 为 begin 程 序 ， 当 单 击 按钮 时 进行 调用 ， 主 要 完成 以 下 几 个 功能 ， 如 图 5-5 所 示 。 
1) 对 X、Y 坐 标 进行 赋值 ， 一 一 对 应 ， 坐 标 对 应 地 鼠 在 地 洞 上 的 坐标 ， 可 以 通过 在 Ul 界 面 移动 地 鼠 得 到 。 


2) 激活 两 个 Clock 组 件 ， 地 电 移 动 ， 倒 计时 开始 。 





图 5-5 “开始 模块 


3) 初始 化 游戏 状态 图 标 。 注 意 这 里 游戏 开始 也 包含 重新 开始 的 情况 ， 因 此 要 考虑 全 面 ， 将 全 局 变量 重新 赋值 。 游 戏 结束 时 ， 在 画布 上 写 出 游戏 结束 语句 ， 游 戏 开 始 时 将 画布 清除 。 
3. 地 鼠 及 计 分 模块 
clock1 的 时 间 间 隔 是 00 毫秒 ， 这 个 数据 可 以 根据 游戏 需要 进行 设置 。 每 一 个 周期 执行 的 程序 是 地 鼠 随 机 出 现在 5 个 地 洞 中 。 


当 玩 家 手指 单 击 画布 时 ， 判 断 是 否 击 中 ， 如 果 击 中 ， 发 出 击 中 声音 ， 并 且 计 分 加 一 ， 如 图 5-6 所 示 。 


randon NteEer 






Tl bal 
nder 
lL vbal 和 

































4 lobal rs 


global ne 








图 5-6 ”地 和 鼠 及 计 分 模块 


4. 倒 计时 模块 
Clock2 的 时间 间 隔 为 默认 值 ， 也 就 是 每 1 秒 运行 一 次 ， 每 个 周期 将 秒 数 减 一 ， 当 秒 数 为 0 时 ， 激 活 游戏 结束 模块 ， 如 图 5- 7 所 示 。 
5. 游 戏 结束 模块 


游戏 结束 时 将 两 个 计时 器 暂停 ， 在 画布 上 提示 “游戏 结束 ， 重 新 开始 。” 的 字样 ， 如 图 5-8 所 示 。 
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图 5-7 倒计时 模块 
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图 5-8 游戏 结束 模块 
图 任务 小 结 


本 节 通 过 打 地 鼠 的 小 游戏 ， 介 绍 了 动画 游戏 的 开发 流程 和 细节 。 为 使 游戏 具有 可 玩 性 ， 增 加 了 计 分 和 倒计时 功能 。ImageSsprite 结 合 Clock 组 件 的 使 用 ， 可 以 制作 出 各 种 动画 效果 。 将 游戏 的 各 个 模块 打 
包 在 Procedures 中 ， 有 利于 游戏 的 调试 和 维护 。 


侣 自我 文中 
1. 增 加 地 洞 和 地 局 。 
2 地 鼠 击 中 时 显示 地 鼠 晕 磋 图 片 。 


3. 为 玩家 的 手指 增加 锥 子 图 片 。 


5.2 ” 弹 球 


四 难度 % 六 


弹 球 是 打 砖 块 游戏 的 简化 版 〈 即 省 去 了 砖 块 ) ， 这 里 我 们 通过 这 个 游戏 来 了 解 球 的 运动 及 反弹 ， 掌 握 碰 撞 的 处 理 方式 。 
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Ball 组 件 使 用 。 


“ 反弹 处 


: 碰撞 处 


理 。 


理 。 


弹 球 App 界 面 设计 可 参考 图 5-9， 实 现 功能 如 下 : 


. 单 击 “ 开 始 游戏 ”按钮 后 游戏 开始 。 
“ 小 球 随 机 运动 ， 遇 到 上 方 和 左右 两 方 的 墙 面 反弹 ， 遇 到 下 面 游戏 结束 。 
玩家 控制 木板 左右 移动 ， 碰 到 小 球 后 小 球 反 弹 。 


池 戏 结束 ， 蛙 新 开始 


a 有 
开始 游 戏 分 数 0 开始 游戏 分 数 5 





图 5-9 ” 弹 球 实例 界面 
全 基础 知识 
1. 小 球 运动 方向 


在 Canvas 的 坐标 体系 中 ， 小 球 运动 的 方向 通过 Heading 属 性 设置 ， 值 为 -180 到 180， 对 应 360 度 方向 如 图 5-10 所 示 。 如 小 球 的 Heading 值 不 在 -180 到 180 范 围 内 ， 则 与 360 度 加 减 后 换算 得 到 相对 应 的 
Heading 值 。 如 Heading 值 为 315， 则 315-360= -45， 表 明 小 球 向 右 下 方 移动 。 如 Heading 值 为 405， 则 405-360=45。 


2. 边 界 处 理 


当 小 球 运 动 到 Canvas 的 边界 时 ， 会 触发 when Ball EdgeReached 事 件 ，Al 中 ， 边 界 根据 方向 不 同 取 值 为 -4、-3、-2、-1、1、2、3、4， 如 图 5-11 所 示 。 





图 5-10 ”小 球 运动 方向 


图 5-11 ”小 球 运动 方向 
3. 反 弹 处 理 


小 球 碰 到 物体 会 进行 反弹 ， 反 弹 符合 物理 上 的 反射 原理 ， 反 射 角 等 于 入 射 角 。Al 中 的 反弹 有 两 种 情况 ， 一 种 是 遇 到 边界 的 反弹 ，Al 中 对 这 种 反弹 有 专门 事件 和 方法 进行 处 理 ， 如 图 5-12 所 示 。 另 一 种 情 
多 是 与 Bal| 或 ImageSprite 碰 撞 ， 反 弹 处 理 为 360-Heading 值 ， 如 图 5-13 所 示 。 


lj! \ EUdEeNKeEached 


图 5-12 遇 到 边界 反弹 








图 5-13 ”其 他 情形 反弹 
ungit 


新 建 Ball 项 目 ， 首 先 找到 左右 箭头 、 木 板 素材 ， 命 名 为 left.png、right.png、paddle.png， 素 材 通 过 Media 面 板 上 传 。UI 布 局 分 为 三 部 分 : 上 方 为 游戏 主 界面 ， 放 置 Canvas、Ball、lmageSprite; 中 
间 为 状态 栏 ， 功 能 为 开始 游戏 和 统计 分 数 ; 下 方 为 控制 按钮 ， 控 制 木板 的 左右 移动 。Ul 界 面 如 图 5-14 所 示 ， 程 序 组 件 见 表 5-2 组 件 说 明 。 
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图 5-14” 弹 球 UI 设计 
表 5-2 弹 球 组 件 说 明 


是 作 | 所 TR TT 


Text， 弹 球 


AlienHorizontal: centor 


Screen Screenl 


BackeroundColor: Pink 


FontSilze: 25 


Dranwine and 








Canvas Canvasl 洲 戏 界面 
Animation Width: Fill parent 
Height: 280 
Dranwine and a 
Ball a Balll 二 从 
Anmation 
BackeroundImagse: Paddle.pne 
Dranwine and ee 
ImageSsprite . ImageSpritel | 不 书 Width: $0 
Anmation 
Height: $0 
Horizontal Horizontal ER 本 
水 平 放置 按钮 | 默认 
Airangement Arrangementl 
_ FontSize: 28 
Button User Interface Btn Play a 
入 Text: 开始 
、 FontSize: 28 
Label User Interface Labell ey 
Text: 分 数 
0 FontSize: 28 
Label User Interface Label2 TE 
Text: 0 
Horizontal Horizontal i A 
Layout 水 平 放置 按钮 | 默认 
Airangeiment Airangement2 





和 从 IE 


Image: lefttpng 
Text: 

Width: 80 
Height: 80 


Button User Interface Btn Left 左 移动 木板 


Image: Tight.pneg 
Text: 

Width: 80 
Height: 80 


Button User Interface Btn Right 右 移 动 木板 





人 @ 模 块 编辑 
1. 定 义 全 局 变量 


定义 全 局 变量 score， 用 来 记录 分 数 ， 如 图 5-15 所 示 。 





2. 开 始 模块 

弹 球 游戏 开始 时 完成 以 下 几 个 功能 ， 如 图 5-16 所 示 。 

1) 弹 球 移动 到 坐标 (100，100) 。 

2) 弹 球 速度 随机 (范围 为 ?~15) ， 方 向 随机 (范围 为 -180~180) 。 


3) 积分 恢复 为 0， 全 局 变量 为 0，Lable 为 0， 清 除 画布 。 
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rarldo 





图 5-16 ”开始 模块 


3. 弹 球 模块 


弹 球 如 果 遇 到 底部 边界 ， 则 触发 游戏 结束 模块 ， 如 是 其 他 边界 ， 则 进行 反弹 ， 同 时 计 分 加 一 ， 如 图 5-17 所 示 。 





when TT a ,EdgeRheached 


thern call 


= | 

















4. 辜 挤 模 块 


当 小 球 与 木板 碰撞 时 ， 小 球 反弹 ， 如 图 5-18 所 示 。 





WL Ealll - Mb i 








5. 木 板 模块 


木板 主要 通过 两 个 Button 控 制 左 右 移动 ， 如 图 5-19 所 示 。 








tn Left ， ot 

















when Ftn Right > .Click \ 


0 set 





图 5-17 弹 球 模块 





图 5-18 ”小 球 反 弹 模 块 





6. 结 束 模块 





图 5-19 ”木板 模块 


游戏 结束 时 将 小 球速 度 置 0， 在 画布 上 提示 “游戏 结束 ， 重 新 开始 ”的 字样 ， 如 图 5-20 所 示 。 


ee Dr aw|Ext 


Tr 下 





图 5-20 ”结束 模块 
@{ 务 小 结 
本 节 通 过 弹 球 小 游戏 ， 介 绍 了 Ball 组 件 的 运动 和 碰撞 ， 为 以 后 进行 复杂 游戏 开发 奠定 基础 。 
〇 自我 器 
1. 通 过 传感器 控制 木板 移动 。 


2. 增 加 砖 块 ， 使 用 小 球 碰撞 砖 块 。 


5.3 打 飞 机 


© 难度 六 六 六 


微 信 5.0 上 线 后 ， 打 飞机 这 款 古 老 的 游戏 又 重新 焕发 活力 ， 本 节 我 们 来 学 习 制 作 一 个 简单 的 打 飞 机 游戏 ， 进 一 步 学 习 动 画 游戏 的 制作 。 





显示 动画 。 
.多 ImageSptite 处 理 。 
- 碰撞 处 理 。 


. 音效 处 理 。 


打 飞 机 App 界 面 设计 可 参考 图 5-21， 实 现 功 能 如 下 : 

. 单 击 “ 开 始 ” 按 钮 后 游戏 开始 。 

“ 敌 方 小 飞机 、 大 飞机 从 屏幕 上 方向 下 移动 ， 周 期 运动 ， 小 飞机 移动 快 ， 大 飞机 移动 慢 。 

. 我 方 飞 机 在 屏幕 下 方 ， 可 拖 提 移动 ， 单 击 飞机 后 发 射 子弹 ， 发 出 声音 。 子 弹 向 上 移动 ， 到 屏幕 上 方 后 消失 ， 在 消失 前 我 方 飞机 不 能 再 发 射 子 弹 。 
` 子弹 击 中 敌 机 后 敌 机 爆炸 ， 发 出 爆炸 声 ， 我 方 分 数 加 1。 


. 我 方 飞机 与 敌 机 相 撞 后 ， 我 方 飞机 爆炸 ， 发 出 爆炸 声 ， 手 机 震动 ， 游 戏 结束 ， 弹 出 选择 框 “ 重 新 游戏 ”和 “退出 ”两 个 按钮 。 


21:39 


戏 结束 


开始 击 溢 飞机 数 0 





图 5-21 ” 打 飞 机 App 实 例 界 面 
© 
由 于 Canvas 是 静态 图 片 ， 无 法 显示 gif 格式 ， 因 此 要 显示 动画 必须 变通 ， 配 合 时 钟 的 使 用 将 静态 图 片 变 为 动画 。 首 先 ， 需 要 将 gif 图 片 转 化 为 静态 图 片 ， 可 以 使 用 gif 分 离 器 工具 ， 分 离 后 选择 合适 的 帧 数 
(图 片 ) ， 然 后 根据 显示 ， 调 整 时 钟 周 期 (一 般 为 200 毫 秒 ) ， 在 时 钟 内 依次 更 改 图 片 ， 完 成 动画 显示 。 


新 建 plane 项 目 ， 首 先 寻 找 图 片 和 声音 素材 。 我 方 飞机 为 plane.png， 子 弹 为 bullet.png， 政 机 大 飞机 为 bjig.png， 小 机 为 small,png， 分 别 记 录像 素 宽 高 (由 于 爆炸 图 片 蔡 换 ， 需 要 固定 图 像 精 灵 : .的 
宽 高 ) 。 分 离 4 张 爆炸 图 片 ， 命 名 为 1.png、2.png、3.png、4.png。 子 弹射 击 声音 为 shoot.mp3， 爆 炸 声音 为 explosion.mp3。 素 材 通 过 Media 面 板 上 传 。Ul 布 局 分 为 两 部 分 ， 上 方 为 游戏 主 界面 ， 放 置 


Canvas、 四 个 ImageSprite、 两 个 Sound、 三 个 Clock、 一 个 Notifier。 由 于 爆炸 图 片 为 黑色 底 ， 将 Canvas 背 景 设计 为 黑色 。 下 方 为 开始 和 状态 栏 ， 用 来 开始 游戏 和 记录 击 中 飞机 架 数 。Ul 界 面 如 图 5-22 所 


示 ,程序 组 件 见 表 5-3 组 件 说 明 ， 
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图 5-22” 打 飞机 UI 设计 
表 5-3 ” 打 飞 机 组 件 说 明 


组 件 U1 属性 
BacKkgroundColor : 
Black 
Canvas Canvasl 洲 戏 界面 FontSize: 25 

Ammation a | 

Width: Fill parent 

Height: 410 
Enabled: 不 选 
Heading: 90 
Picture: bullet.pneg 
Heading: -90 
Picture: Big.png 
下方 大 飞机 X: 196,Y: 0 
Width: 114 
Height: 169 
Headimg: -50 
Picture: small.pne 
small 多方 小 长相 X: 0.Y: 0 
Width: 69 
Helght:， 89 


Dranwine and 








我 方 飞机 友 出 的 


| 
广 弹 


a Dranwine and 
ImageSprite bullet 


Anmation 





| Dranwing and 
ImagesprIlte 四 
Ammation 


Dranwine and 


ImageSprite 
: Animation 


( 续 ) 





四 人 | 所 RT TT 
i 9 Picture: simall.pne 
ranwing an es 

ImageSprite plane 玩家 控制 飞机 | Width: 69 


Animation 





Helpght: 89 








水 平 放置 按钮 Width: Fill parent 





Horizontal Horizontal 
Layout 
Airanegement AIrangement]l 
| Text: 开始 
Button User Interface Buttonl | : 
Width: 100 


ee 栈 方 大 飞机 爆炸 | TimerEnabled: 不 选 
Clock Sensors Clock big Nt 
控制 时 钟 TimerInterval: 200 
改 方 小 飞机 爆炸 | TimerEnabled: 不 选 
on ee 致 方 小 飞机 爆炸 | TimerEnabled: 不 选 


控制 上 时钟 TimerInterval: 200 


TimerEnabled:， 不 议 
Clock SENsors Clock plane 


TimerInterval: 200 


洲 戏 疆 束 
Notfer User Interface Notiflerl . 二 点 人 
选择 弹 窗 


Sound Sound shoot 斑 弹 发 出 声 音 ”| Source: shoot.mp3 
Sound explosion 机 爆炸 声 站 Source: 














Sound exploslion.mp3 





仿 模 决 编辑 
1 .定义 全 局 变量 


定义 全 局 变量 index， 初 始 值 为 1， 用 来 显示 爆炸 动画 的 初始 图 片 ; 定义 全 局 变量 score， 初 始 值 为 0， 用 来 记录 分 数 ， 如 图 ?5-23 所 示 。 





hl 


图 5-23 ”定义 全 局 变 


2. 开 始 模块 

打 飞 机 游戏 开始 时 完成 以 下 几 个 功能 ， 如 图 5-24 所 示 。 
1) 第 1、2 行 计 分 清 0。 

2) 第 3~5 行 设置 爆炸 飞机 恢复 原状 。 

3) 第 6~7 行 是 玩家 飞机 初始 位 置 。 


4) 第 8~11 行 为 敌 方 大 飞 机 、 小 飞机 飞行 速度 和 位 置 。 


窒 飞 机 


玩家 飞机 主要 有 两 个 功能 ,一 是 移动 ， 通 过 Dragged 事 件 。 二 是 友 射 子弹 ， 通 过 单 击 飞机 触发 。 只 有 在 子弹 不 可 见 时 ， 才 能 再 次 友 射 子弹 ， 否 则 子弹 将 可 能 无 法 击 中 敌 机 。 子 弹 的 位 置 通过 飞机 的 坐标 
和 机 身 的 宽度 确定 ， 同 时 触发 射击 声音 ， 激 活 子弹 组 件 和 可 见 性 ， 如 图 5-25 所 示 。 
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图 5-24 ”开始 模块 
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图 5-25 ”玩家 飞机 模块 


本 游戏 政 方 飞机 运动 路 径 比 较 简单 ， 只 是 在 Y 轴 上 周期 重 现 ， 到 达 屏 幕 底 部 后 重新 从 顶部 出 现 ， 如 图 5-26 所 示 。 


. Edgekeached 








图 5-26” 敌 方 飞机 模块 


子弹 模块 分 两 种 情况 ， 一 种 是 未 击 中 敌 机 ， 子 弹 到 达 屏 幕 项 端 ， 子 弹 组 件 失 活 、 消 失 ， 等 待 再 次 激发 ， 如 图 5-27 所 示 。 另 一 种 是 子弹 击 中 敢 机 ， 触 发 子弹 的 碰撞 事件 ， 区 分 是 大 飞机 还 是 小 机 ， 分 别 
触 上 友 大 飞机 和 小 飞机 的 爆炸 事件 。 击 中 敌 机 后 子弹 同样 失 活 、 消 失 ， 爆 炸 事 件 打包 为 bang 程 序 ， 同 时 计 分 加 1， 激 活 爆 炸 声 音 ， 如 图 5-28 所 示 。 





图 5-27 子弹 未 击 中 模块 
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图 5-28 子弹 击 中 模块 
6. 爆 炸 模块 


当 子 弹 击 中 政 机 时 ， 调 用 了 bang 程 序 ，bang 程 序 首 先 将 爆炸 图 片 序号 设置 为 1， 然 后 激活 控制 爆炸 的 时 钟 ， 由 于 敌 机 和 玩家 飞机 均 调 用 爆炸 图 片 ， 调 用 不 同 的 时 钟 ， 因 此 bang 程 序 添加 了 Clock 人 参数， 


简化 操作 ， 如 图 5-29 所 示 。 时 钟 激活 后 ， 政 机 不 再 运动 ， 速 度 为 0， 收 机 图 片 更 换 为 第 1 张 爆炸 图 片 ， 在 时 钟 周期 内 递增 ， 依 次 更 换 为 第 2、3、4 张 图 片 ， 完 成 爆炸 显示 。 当 全 局 变量 index 递 增 至 5 时， 飞机 
重新 从 原始 位 置 复活 ， 完 成 周期 ， 同 时 时 钟 失 活 。 大 飞机 爆炸 如 图 5-30 所 示 ， 小 飞机 爆炸 如 图 5-31 所 示 。 
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图 5-29 bang 程序 
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图 5-30 ”大 飞机 爆炸 模块 
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图 5-31 小 飞机 爆炸 模块 


游戏 结束 意味 着 玩家 飞机 与 敌 机 相 撞 ， 调 用 爆炸 bang 事 件 ， 同 时 激活 声音 和 震动 ， 如 图 5-32 所 示 。 玩 家 飞机 爆炸 动画 显示 后 调用 游戏 结束 程序 over， 如 图 5-33 所 示 。Over 程 序 将 敌 机 速度 设 为 0， 后 调 
用 Notifier 进 行 选择 重新 开始 还 是 退出 ， 如 图 5-34 所 示 ， 选 择 后 进行 相应 操作 ， 如 图 5-35 所 示 。 
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图 5-32 ”玩家 敌 机 被 碰撞 
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图 5-33 ”玩家 飞机 爆炸 模块 
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图 5-34 ”结束 模块 
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图 5-35 ”选择 模块 

@{ 务 小 结 

本 节 通过 打 飞 机 游戏 ， 介 绍 了 分 模块 处 理 游戏 不 同事 件 的 方法 ， 学 习 从 发 射 子弹 到 碰撞 ， 再 到 爆炸 的 处 理 过 程 。 特 别 是 通过 调用 时 钟 来 完成 类 似 gif 动画 的 展示 ， 配 合 声音 和 震动 的 效果 ， 增 加 游戏 的 可 
玩 性 。 
〇 自我 交 中 

1 敌 方 飞机 从 上 方 随机 出 现 。 

2 . 敌 方 飞机 自动 向 玩家 飞机 移动 。 

3 . 敌 方 飞机 发 射 子弹 。 


4. 设 置 大 小 飞机 不 同 血 量 。 





[1] 图 像 精 灵 ， 即 ImageSprite， 后 文 简称 为 精灵 。 编辑 注 


5.4 拼图 


全 难度 太太 六 


拼图 是 儿 时 大 家 都 玩 过 的 游戏 ， 简 单 又 耐 玩 ， 富 含 数学 的 逻辑 推理 。 现 在 我 们 来 学 习 制作 3x 3 的 简单 拼图 ， 了 解数 学 思维 在 编程 中 的 应 用 。 





学 习 目 标 


“ 两 点 间 测 距 。 
“ 多 组 件 简化 处 理 。 
“ 不 可 还 原 的 拼图 。 


" 复杂 程序 的 处 理 。 


拼图 App 界 面 设计 可 参考 图 5-36， 实 现 功 能 如 下 : 

单 击 “ 开 始 ” 按 钮 后 游戏 开始 ， 图 片 自动 打 乱 ， 开 始 计时 。 
` 单 击 图 片 可 以 移动 到 有 空白 格 的 地 方 ， 没 有 空格 的 不 能 移动 。 
* 完成 拼图 后 显示 游戏 胜利 。 


` 界面 下 方 显示 还 原 图 片 。 
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图 5-36 ”拼图 App 实 例 界 面 
© 


对 于 3x3 的 拼图 ， 如 果 打 乱 图 片 ， 第 一 个 想到 的 方法 是 随机 打 乱 ， 但 是 经 过 测试 后 会 发 现 ， 有 的 打 乱 后 最 终 不 能 还 原 ， 这 个 概率 是 50%， 也 就 是 遇 到 了 不 可 还 原 的 拼图 ， 出 现 了 游戏 的 Bug。 更 深入 的 
东西 可 以 查阅 用 逆序 数 的 奇偶 性 来 判断 是 否 为 不 可 还 原 的 拼图 。 这 里 我 们 只 需 知道 不 能 用 随机 的 方法 来 处 理 拼图 ， 所 以 用 了 蔡 换 办 法 ， 手 动 走出 几 个 可 以 还 原 的 拼图 ， 然 后 记录 下 这 样 的 顺序 ， 保 存在 程序 
中 随机 选取 。 


CD Unait 


新 建 Puzzle 项 目 ， 首 先 寻 找 图 片 素材 ， 然 后 进行 图 片 分 割 ， 也 可 以 使 用 一 些 在 线 工 具 (http://www.asqql.com/giffg/) 。 这 里 使 用 的 是 安 卓 机 器 人 ， 完 整 图 片 命名 为 alljpg， 分 割 成 8 块 图 片 ， 右 上 角 
3 号 位 空白 ， 每 张 图 片 大 小 宽 50 像 素 ， 高 50 像 素 ， 命 名 为 1、2、4、5、6、7、8、9。 游戏 布局 为 上 下 界面 ， 分 4 部 分 ， 第 1 部 分 为 计 步 计 时 ， 增 加 游戏 竞技 性 。 使 用 HorizontalArrangement 和 Label， 第 2 
部 分 为 游戏 主 界 面 ，Canvas 宽 高 150 像 素 ， 内 置 8 个 Imagesprite， 帘 高 50 像 素 ，3x 3 对齐 ， 右 上 角 空 。 第 3 部 分 为 开始 按钮 ， 第 4 部 分 为 正确 图 片 。 另 外 增加 Clock 组 件 用 来 计时 ，Neotifier 组 件 用 来 弹出 游 
戏 胜 利 界面 ，Ul 界 面 如 图 5-37 所 示 ， 程 序 组 件 见 表 5-4 组 件 说 明 。 
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图 5-37 拼图 UI 设计 
表 5-4 拼图 组 件 说 明 
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人 @ 模 块 编辑 


1. 程 序 思 维 转换 


根据 我 们 前 面 介绍 的 内 容 ， 完 成 拼图 的 移动 有 几 种 方法 ， 一 是 直接 拖 忠 图 片 ， 要 解决 的 问题 有 目标 位 置 、 是 否 可 以 移动 、 精 灵 磁 撞 重 苹 问 题 ， 相 对 繁琐 。 由 于 空白 位 置 只 有 一 个 ， 也 可 以 使 用 单 击 目标 
图 片 的 方法 ， 如 果 目 标 图 片 可 以 移动 ， 直 接 移动 到 空白 位 置 。 那 么 如 何 判断 单 击 图 片 是 否 可 以 移动 到 空白 位 置 ”通过 观察 发 现 ， 只 有 空白 格 上 下 左右 相 邻 的 精灵 才 可 以 移动 到 目标 位 置 ， 结 合 精灵 在 画布 中 
的 坐标 ， 可 以 转换 为 数学 问题 ， 如 果 精 灵 当 前 的 坐标 与 空白 坐标 距离 为 ?20， 则 该 精灵 可 以 移动 。 而 任意 时 刻 空 白 位 置 的 坐标 可 以 通过 450 减 去 8 个 精灵 的 坐标 得 到 。 这 样 拼图 的 问题 已 经 完全 转化 为 数学 问 


日 


题 。 
2. 定 义 全 局 变量 


由 于 程序 相对 复杂 ， 定 义 变量 较 多 ， 分 为 3 个 部 分 ， 第 1 部 分 如 图 5-38 所 示 ， 全 局 变量 x、y， 初 始 值 均 为 0， 表 示 空 白 格 的 坐标 ; 全 局 变量 steps 和 second， 初 始 值 为 0， 分 别 计 步 、 计 时 ; 定义 全 局 变量 
sprlst， 初 始 为 空 列表 ， 用 来 保存 精灵 列表 ， 简 化 操作 。 第 2 部 分 如 图 5-39 所 示 ， 定 义 xlist、ylist 列 表 ， 初 始 值 为 8 个 精灵 的 初始 坐标 。 第 3 部 分 为 如 图 5-40 所 示 ， 定 义 全 局 变量 radompic， 初 始 值 为 文字 型 的 
列表 ， 初 始 值 “3，1，6，4，2，7，8，5” 为 不 可 还 原 的 拼图 ， 表 示 精 灵 1~ 9 ( 除 3) 初始 对 应 的 坐标 位 置 ， 如 首位 3 表示 精灵 1 对 应 的 X 坐 标 是 xlist 的 第 3 号 序列 ， 对 应 Y 坐 标 是 ylist 的 第 3 序列 ， 即 

(0，50) 。 
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图 5-38 第 1 部 分 全 局 变量 
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图 5-39 ”第 2 部 分 全 局 变量 






radonpic E71, 6, 42, 7,5,5 0 
We 4, 6, 7, 1, 6, 5, 2, 5, BM 


1 ,BS 2 对， 


图 5-40 ”第 3 部 分 全 局 变量 
3. 游 戏 开始 模块 
拼图 游戏 开始 时 完成 以 下 几 个 功能 ， 如 图 5-41 所 示 。 
1) 初始 化 精灵 列表 。 
2) 计时 计 步 清 零 ， 计 时 开始 。 


3) 打 乱 拼图 ， 调 用 radompic 程 序 。 
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| 


图 5-41 开始 模块 
4. 打 乱 拼图 模块 


打 乱 拼图 主要 是 根据 我 们 手动 保存 的 序列 进行 调整 ， 本 程序 保存 了 3 个 可 还 原 拼 图 的 序列 ， 通 过 随机 选取 后 转化 为 list 赋 予 局 部 变量 radom， 通 过 for each 循 环 ， 将 每 个 精灵 移动 到 指定 位 置 ， 完 成 打 乱 
拼图 ， 如 图 5-42 所 示 。 
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call Imasesprite. MeowmeTe 


for comornent 





图 5-42” 打 乱 拼 图 模块 





8 个 拼图 的 移动 方式 是 一 致 的 ， 这 里 只 展示 一 个 ， 如 图 5-43， 通 过 呼叫 get x、get y 异 块 获取 到 空白 位 置 的 坐标 ， 通 过 call distance 模 块 获取 两 坐标 间距 离 ， 距 离 符合 50 则 进行 移动 ， 最 后 调用 testwin 
判断 是 否 达到 胜利 条 件 。 
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图 5-43 ”拼图 移动 模块 


获取 空白 坐标 的 get_x 模 块 和 get_y 模 块 如 图 5-44 所 示 。 
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图 5-44 ”获取 空白 位 置 坐 标 


获取 两 点 坐标 distance 模 块 数学 公式 为 根 号 下 (x1-x2) ^2+ (y1-y2) ^2， 如 图 5-45 所 示 。 


工人 起 区 志 SEt 1 二 二 Elobal 到 | 
半 频 ” 吉 考 硬 [3 | 





图 5-45 ”两 点 距离 模块 
6. 拼 图 是 否 还 原 模 块 


判断 拼图 是 否 还原 ， 也 就 是 每 个 精灵 是 否 到 达 指 定位 置 ， 方 法 是 8 个 精灵 依次 判断 (如 图 5-46 所 示 ) 。 使 用 循环 判断 X、Y 坐 标 是 否 和 初始 xlist 和 ylist 的 对 应 坐标 一 致 ， 如 果 一 致 局 部 变量 number 加 1 ， 


如 果 number 为 8， 说 明 8 个 精灵 位 置 到 达 指 定位 置 ， 调 用 胜利 模块 win。 同 时 将 计 步 模块 加 入 。 
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图 5-46 ”拼图 是 否 还 原 模块 


7. 计 时 模块 


计时 模块 如 图 5-47， 相 对 简单 。 


ls | ,| 1meTr 





图 5-47 ”计时 模块 


8. 胜 利 模 块 


游戏 胜利 模块 win 弹 出 提示 框 ， 同 时 计时 器 停止 ， 如 图 5-48 所 示 。 
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图 5-48 ”胜利 模块 


@{ 务 小 结 

本 节 通 过 拼图 游戏 ， 介 绍 了 数学 思维 在 编程 中 的 应 用 。 在 处 理 复杂 问题 时 ， 通 过 数学 思维 往往 能 简化 程序 。 同 时， 将 相同 组 件 作为 列表 处 理 ， 也 能 简化 模块 
〇 自我 实 中 

1 完成 一 个 4x4 拼 图 的 游戏 制作 。 


2 .游戏 选择 不 同 的 拼图 背景 。 


5.5 2048 


全 难度 太太 太太 


2048 是 时 下 一 款 非 常 火 爆 的 游戏 ， 风 靡 全 球 ， 各 种 编程 语言 的 版 本 都 很 多 ， 而 Al 也 可 以 制作 这 款 复杂 的 游戏 。 本 节 通 过 制作 2048 的 游戏 ， 了 解 复 杂 程 序 的 编程 思路 。 


学 习 目 标 
" 复杂 程序 编程 思路 。 
: 化 整 为 震 的 方法 。 


Flung 的 用 法 。 


芍 f 务 措 述 

2048App 界 面 设计 可 参考 图 5-49， 实 现 功能 如 下 : 

. 游戏 开始 时 画布 内 两 个 2)， 移 动 时 如 果 有 空格 ， 在 画布 内 随机 增加 1 个 数字 ， 出 现 的 数字 仅 可 能 为 2 或 4。 

. 手指 上 下 左右 滑动 可 以 移动 数字 ， 选 择 的 方向 上 若 有 相同 的 数字 则 合并 ， 不 能 连续 合并 ， 被 合并 的 数字 为 分 数 。 


' 画布 被 数字 填 满 ， 无 法 进行 有 效 移 动 和 合并 ， 游 戏 结束 ， 记 录 最 高 分 ， 图 片 可 分 享 。 
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图 5-49 2048 App 实 例 界面 
多 编程 思路 


前 面 的 项 目 我 们 直接 给 出 了 编程 模块 ， 没 有 过 多 的 介绍 编程 思路 ， 而 对 于 大 型 复杂 的 项 目 ， 编 程 的 思路 非常 关键 ， 我 们 不 可 能 一 步 到 位 编写 好 程序 ， 而 应 该 化 整 为 零 ， 逐 步 完 善 。 对 于 游戏 的 设计 ， 读 
者 可 能 会 想 用 类 似 拼图 游戏 的 方法 来 移动 精灵 ， 但 这 样 的 方法 测试 后 会 发 现 ， 程 序 将 非常 复杂 。 我 们 换 一 种 思路 ， 精 灵 位 置 固定 不 动 ， 而 每 次 采取 更 换 图 片 的 方式 ， 则 程序 就 会 变 得 简单 。 只 要 我 们 得 到 每 
一 步 的 数字 ， 然 后 更 换 相 应 的 图 片 即 可 ， 对 于 空白 的 地 方 可 以 使 用 0 代 蔡 ， 这 样 图 片 游戏 转变 为 纯 数字 的 矩阵 游戏 ， 难 度 大 大 减 小 。 进 一 步 分 析 游 戏 规则 ， 游 戏 可 以 分 为 以 下 几 个 模块 : 游戏 初始 化 模块 、 计 
分 模块 、 移 动 模块 、 合 并 模块 、 随 机 增加 2 或 4 模块 、 绘 图 模块 、 游 戏 结束 判断 模块 、 分 享 模块 等 。 我 们 首先 进行 研究 游戏 的 核心 和 难点 ， 即 移动 和 合并 模块 。 


对 于 4 乘 4 的 和 矩阵 分 析 ， 难 度 较 大 ， 仍 然 采用 化 整 为 零 的 方法 。 将 4 乘 4 矩 阵 简化 为 4 乘 1 的 数列 (list) ， 四 方向 移动 简化 为 向 右 移动 ， 表 简化 为 只 移动 不 合并 ， 通 过 简化 问题 已 经 变 为 abcd 向 右 移动 后 的 


新 组 合 。 将 抽象 问题 具体 化 ， 观 察 其 中 的 规律 ， 如 2000 向 右 移动 为 0002，2480 向 右 移动 为 0248，2040 向 右 移动 为 0024，0204 向 右 移动 为 0024， 可 以 得 出 如 下 算法 : 把 序列 中 的 0 先 删除 ， 非 0 数字 依次 靠 
右 ， 然 后 左 侧 补 齐 0， 转 化 为 程序 语言 就 是 将 第 1 位 到 第 4 位 的 0 依次 删除 ， 然 后 将 0 添加 到 序列 的 首位 。 可 以 通过 图 5-50 配 合 Button 和 Label 进 行 调试 验证 。 
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图 5-50 ”向 右 移动 调试 


对 于 程序 中 的 算法 ， 并 不 是 唯一 。 算 法 往往 是 决定 程序 优 劣 的 关键 。 初 期 我 们 可 以 侧重 于 实现 功能 ， 后 期 再 进行 算法 的 完善 。 


解决 了 移动 的 问题 后 再 解决 合并 数字 问题 ， 如 0220 向 右 合并 为 0004，2220 向 右 合并 为 0024， 而 不 是 0042。 通 过 观察 发 现 ， 需 要 依次 判断 43 位 、32 位 、21 位 的 数字 是 否 相同 ， 并 且 最 多 合并 两 次 ， 如 
2222， 只 能 合并 为 0044， 不 能 合并 为 0008。 注 意 Al 中 list 的 变化 ， 每 次 合并 完成 后 list 发 生变 化 ， 如 2244 首 先 检查 43 位 合并 变 为 0228， 再 检查 当下 list 的 32 位 ， 实 际 是 上 一 序列 的 21 位 。 向 右 合并 模块 如 图 5- 
51， 注 意 其 中 的 逻辑 判断 。 


解决 了 4 乘 1 的 移动 合并 问题 ， 现 在 扩展 到 4 乘 4 和 矩 阵 。 如 图 5-52~ 图 5-54 进 行 调试 检 验 。 


向 左 移 的 方法 和 右 移 对 称 ， 对 照 修 改 即 可 。 接 下 来 完成 上 下 移动 。 如 果 将 4x4 的 矩阵 逆 时 针 旋转 90 度 ， 就 会 发 现 原来 的 上 下 移动 变 成 了 左右 移动 ， 这 样 就 可 以 简化 操作 ， 对 应 的 程序 为 图 5-55 所 示 。 
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图 5-51 ”向 右 合并 
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图 5-53 ”Rowall 模 块 
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图 5-54 4 行 向 右 调试 


而 前 EB 是 二 工 可 沙 make 有 ] 1 st 


make & 1]1st 


make & 11st 


图 5-55 ”旋转 天 阵 


通过 RowToCol 的 程序 可 以 旋转 矩阵 ， 完 成 移动 合并 后 ， 最 终 输 出 时 仍 按照 原来 的 矩阵 输出 ， 调 用 ColToRow 的 程序 ， 如 图 5-56 所 示 。 
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a) CowToRow 程序 
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b) CowToRow 程序 


图 5-56 


调试 时 可 按照 图 5-57 进 行 调试 。 
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图 5-57 ”向 下 移动 合并 
接 下 来 需要 完成 新 增 数 字 的 方法 ， 步 又 如 下 。 
第 1 步 : 24 数 字 概 率 


2 和 4 的 概率 可 以 自己 设 定 ， 这 里 设 定 为 4 : 1， 程 序 为 random24， 如 图 5-58 所 示 。 





图 5-58 ”随机 24 模 块 


第 2 步 : 找 0 的 位 置 
新 增 数字 就 是 矩阵 里 0 的 位 置 ， 定 义 zerolist 的 变量 和 list0 的 程序 方法 ， 按 照 矩 阵 从 上 到 下 、 从 左 到 右 依次 编号 为 1~16， 如 图 5-59 所 示 。 
第 3 步 : 添加 24 到 和 矩阵 


添加 时 首先 获得 当前 的 zerolist， 然 后 判断 是 否 为 空 ， 如 果 不 为 空 ， 则 随机 选取 一 个 元 素 ， 根 据 该 元 素 的 值 可 以 推算 出 矩阵 的 位 置 ， 这 里 可 以 用 商 和 余数 的 方法 ， 如 12 则 是 第 3 行 第 4 列 ，7 是 第 2 行 第 3 
列 ， 如 图 5-60 所 示 。 
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图 5-59 ”list0 模 块 


4 步 : 加 入 条 件 


完成 程序 后 ， 什 么 时 候 需 要 加 入 新 元 素 呢 ? 是 不 是 每 次 单 击 后 都 要 加 入 ? 经 过 测试 会 发 现 ， 这 并 不 符合 游戏 的 要 求 ， 如 0248 选 择 向 右 移动 ， 序 列 不 会 发 送 变 化 ， 这 时 并 不 需要 添加 新 元 素 ， 只 有 向 右 移 


动 序列 发 送 变 化 后 ， 才 触发 添加 事件 。 因 此 ， 这 里 要 引入 中 间 变 量 ， 来 判断 当前 矩阵 是 否 与 上 一 步 矩阵 相同 ， 不 相同 则 添加 。 编 写 same 程 序 ， 相 同 返 回 false， 不 同 返 回 true。 如 图 5-61~ 图 5-62 所 示 。 


最 后 一 个 稍 有 难度 的 模块 是 游戏 结束 条 件 ， 游 戏 结束 满足 两 个 条 件 ， 一 是 没有 空格 ， 也 就 是 zerolist 为 空 ， 二 是 四 个 方向 都 不 能 合并 ， 如 图 5-63 所 示 。 
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图 5-60 add 模块 





图 5-61 。 same 模块 


这 样 游戏 的 主 逻 辑 框架 已 经 完成 ， 剩 下 的 将 一 些 辅助 功能 进行 打包 添加 ， 如 图 片 蔡 换 、 计 分 、 分 享 等 功能 。 
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图 5-62 ”调试 新 增 数字 模块 
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图 5-63 ”nomerge 模 块 
DUngit 


新 建 G2048 项 目 ， 首 先 寻 找 图片 素 材 ， 以 图 片 数 值 命名 图 0jpg、2jpg、4.jpg、8.jpg、16jpg、32jpg、64.jpg、128.jpg、256jpg、512jpg、1024jpg、2048jpg。 游 戏 布局 为 上 下 两 部 分 ， 上 方 为 
游戏 Logo， 以 及 分 数 、 最 高 分 ， 使 用 HorizontalArrangement 和 tableArrangement 进 行 布 局 ， 内 置 Image 和 Label 组 件 。 下 方 为 游戏 主 界面 ，Canvas 宽 高 310 像 素 ， 内 置 16 个 ImageSprite。 另 外 增加 一 
个 隐藏 布局， 放置 两 个 按钮 ， 用 来 游戏 结束 时 重新 开始 和 分 享 。Ul 界 面 如 图 5-64 所 示 ， 程 序 组 件 见 表 5-5 组 件 说 明 。 
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图 5-64 2048 App UI 设计 


表 5-5 2048 组 件 说 明 


组 。 件 U1 属性 


AllenHorizontal: Centor 
SCreen Screenl Text: 2048 

Icon: 2048.1pg 
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1. 定 义 全 局 变量 


由 于 程序 相对 复杂 ， 定 义 变量 较 多 ， 如 图 5-65 所 示 。 一 些 全 局 变量 已 在 编程 思路 做 过 介绍 ，spr1~4 的 变量 为 精灵 列表 ， 用 来 更 换 图 片 蔡 换 矩阵 。score 和 bestscore 分 别 为 分 数 和 最 高 分 数 。 
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图 5-65 ”定义 全 局 变量 
2. 开 始 模块 


2048 游 戏 开始 模块 在 屏幕 初始 化 和 重新 游戏 时 调用 ， 主 要 完成 以 下 几 个 功能 ， 如 图 5-66 所 示 。 
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图 5-66 ”开始 模块 
1) 画布 可 见 ， 重 新 开始 布局 隐藏 。 
2) 初始 化 矩阵 ， 调 用 RowAll 模 块 赋值 allrow 变 量 ， 调 用 RowToCow 旋 转 和 矩阵 赋值 allcol 变 量 ， 赋 值 临 时 变量 tmplist。 
3) 初始 化 精灵 。 
4) 分 数 清 0， 调 用 TinyDB 中 的 最 好 成 绩 。 
5) 矩阵 转化 为 图 片 。 
其 中 RowAll 模 块 见 图 5-53，RowToCol 模 块 见 图 5-55。drawpic 模 块 如 图 5-67 所 示 。 
3. 移 动 模块 


移动 模块 使 用 了 Canvas 的 Flung 事 件 ， 通 过 比较 x、y 的 位 移 来 判断 用 户 上 下 左右 移动 。 分 别 调用 不 同 的 模块 ， 如 图 5-68 所 示 。 
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图 5-67 ”drawpic 模 块 
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图 5-68 ”Flung 事 件 


其 中 对 应 的 上 下 左右 模块 如 图 5-69~ 图 5-72 所 示 。 
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图 5-69 ”upclick 模 块 
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图 5-70 ”downclick 模 块 
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图 5-71 leftclick 模 块 
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图 5-72 ”rightclick 模 块 


大 多 数 模块 前 文 已 经 介绍 ，gameover 模 块 如 图 5-73， 判 断 3 个 条 件 是 否 满足 ， 如 果 满 足 结束 条 件 ， 对 比 当前 分 数 是 否 大 于 TinyDB 保 存 的 历史 最 高 分 ， 若 大 于 则 更 新 。 
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图 5-73 ”gameovert 模 块 


4. 重 新 开始 和 分 享 模块 


重新 开始 只 需要 调用 start 模 块 ， 分 享 模块 这 里 用 到 了 AI 的 Sharing 组 件 ， 分 享 图 片 使 用 Canvas 的 Save 图 片 ， 如 图 5-74 所 示 。 
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图 5-74 ”重新 开始 和 分 享 模块 


例 作 务 小 结 


本 节 通 过 2048 的 游戏 ， 介 绍 了 对 复杂 问题 如 何 化 繁 为 简 的 编程 思路 ， 将 各 个 功能 依次 拆 解 为 简单 的 模块 ， 并 通过 对 矩阵 的 应 用 来 简化 程序 。 
〇 自我 实 路 
1 增加 达到 2048 游 戏 胜利 的 条 件 。 


2. 增 加 “撤销 上 一 步 ”按钮 。 


第 6 章 网络 应 用 


在 Al2 中 嵌入 浏览 器 ， 扩 展 手 机 网 络 功能 ， 使 用 JavaScript 和 ActivityStarter、TinyWebDB 扩 展 手机 应 用 。 


6.1 Me 


全 难度 六 


浏览 器 是 手机 的 必 备 App， 一 些 非 浏 览 器 的 App 也 内 置 了 浏览 器 ， 方 便 用 户 操作 ， 如 微 信 的 内 置 浏览 器 。 本 节 主 要 介绍 WebViewer 组 件 的 基本 应 用 。 





全 学 习 目 标 
* WebViewet 组 件 的 使 用 。 
侈 任务 描述 


浏览 器 App 界 面 设计 如 图 6-1 所 示 ， 实 现 功能 如 下 : 


` 输入 网 址 ， 单 击 “Go ”按钮 后 跳 转 到 指定 网 址 ， 输 入 时 可 省 略 http://。 


` 单 击 “ 主 页 ”按钮 返回 全 页 。 
. 可 返回 时 ，“ 后 退 ” 按 钮 激活 ， 单 击 “ 后 退 ” 按 钮 返回 上 一 页 ; 可 前 进 时 ，“ 前 进 ” 按 钮 激活 ， 单 击 “ 前 进 ” 按 钮 可 前 进 到 上 一 页 。 


* 输入 框 在 非 输入 时 显示 浏览 器 当前 URL。 
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图 6-1 浏览 器 实例 图 
人 ui 计 


新 建 项 目 browser，UI 布 局 为 上 下 两 部 分 ， 上 方 为 “主页 ”、“ 前 进 ”、““ 后 退 ”按钮 ， 以 及 浏览 器 地 址 输入 框 。 下 方 为 NebViewer 组 件 ， 显 示 网 页 内 容 。 另 外 增加 非 可 视 组 件 Clock。 如 图 6-2 所 示 。 
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图 6-2 浏览 器 App UI 设计 
表 6-1 是 整个 App 所 需要 的 组 件 。 


表 6-1 组 件 说 明 


是 作 | 所 局 工具 中 局 全 








Horizontal Horizontal 下 
Layout Width: fill parent 
AIrrangement Arrangementl 
Lexts 起 
Button User Interface Btn Back 
Width. fill parent 
Text: 主 贝 
Button User Interface Btn Home 








Width: fill parent 


Button User Interface Btn Forward | ”前进 Text: 


Horizontal Horizontal . 
Layout Width: fil]l parent 
AIrrangement Arrangement2 
本 Hint: 
TextBox User Interface URL 输入 显示 





Width: fill parent 


Button User Interface 浏览 器 跳 转 Text: Go 


HomeU1rl] : http://bbs. 


WebViewer | User Interface WebViewer!l 浏 咏 克 appinventor.com.cn/ 


Clock Sensors 


全 基础 知 识 





forum.php 


控制 按钮 激活 与 


启示 


默认 


URL 全 称 为 统一 资源 定位 符 (Uniform Resource Locator) ， 也 就 是 常 说 的 网 址 。 它 是 互联 网 上 标准 资源 的 地 址 ， 互 联网 上 的 每 个 文件 都 有 一 个 唯一 的 URL。URL 结 构 为 协议 模式 + 服务 器 名 称 (或 IP 
地 址 ) 。 协 议 模式 常用 的 有 HTTP ( 超 文 本 传输 协议 ) ， 如 百度 地 址 为 http://wwww.baidu.com。 一 般 浏 览 器 处 理 时 我 们 只 需 输入 www.baidu.com， 浏 览 器 会 自动 添加 http://， 而 Al 中 的 浏览 器 没有 这 个 


功能 ， 需 要 我 们 手工 处 理 。 
人 @ 模 块 编辑 


1. 选 取 主 页 


我 们 的 主页 可 以 直接 在 属性 里 进行 设置 ， 也 可 以 在 模块 编辑 中 进行 添加 。 由 于 是 在 手机 页 面 显 示 ， 要 找到 对 应 的 手机 网 站 地 址 ， 如 这 里 选取 的 主页 http://bbs.appinventor.com.cn/forum.php 是 


discuz 论 坛 自动 生成 的 手机 版 网 站 。 目 前 一 些 大 的 站 点 已 经 有 了 自 适 配 功能 。 也 就 是 说 ， 如 果 是 计算 机 访问 ， 跳 转 到 计算 机 版 页 面 ; 如 果 是 手机 访问 ， 跳 转 到 手机 版 页 面 。 为 了 适合 手机 端的 显示 ， 这 里 要 
选取 手机 版 页 面 。 
2. 导 航 事件 


单 击 “<” 按 钮 时 进行 后 退 ，“>” 按 钮 时 进行 前 进 ， 


3. 导 航 按 钮 激活 


使 用 Clock 事 件 ， 可 以 随时 判断 导航 的 前 进 和 后 退 是 


“主页 ”按钮 时 跳 转 到 主页 ， 模 块 如 图 6-3 所 示 。 


否 可 以 激活 ， 进 而 对 按钮 进行 激活 、 失 活 操作 ， 同 时 将 浏览 器 的 URL 显 示 在 文本 框 中 ， 如 图 6-4 所 示 。 
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图 6-3 ”导航 事件 
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图 6-4 ”导航 按钮 激活 





do 


用 户 单 击 Go 按 钮 时 ， 跳 转 到 文本 框 输入 的 地 址 ， 这 里 加 入 了 判断 用 户 是 否 输 入 “http://”， 如 果 没 有 输入 ， 则 在 跳 转 网 址 时 自动 添加 。 判 断 模 块 使 用 了 contains text piece 模 块 
WH het 四 bl [> 


1 如 图 6-5 所 示 。 
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图 6-5 浏览 器 跳 转 


〇 我 实践 


本 节 介 绍 了 AI 浏览 器 的 基本 使 用 ， 需 要 熟练 掌握 ， 为 以 后 浏览 器 的 进一步 应 用 打 好 基础 。 


1. 添 加 设 为 主页 功能 。 


2. 添 加 浏览 器 书签 功能 。 











街景 地 图 是 国内 几 大 地 图 上 厂商 投入 的 重点 ， 特 别 是 微 信 5.0 推 出 后 ， 街 景 入 驻 微 信 
城市 的 街景 。 这 里 我 们 将 学 习 如 何 调用 腾讯 的 街景 地 图 。 


， 人 们 开始 熟悉 这 一 产品 


， 真 正 实 


现 了 足 不 出 户 游览 天 下 的 目的 。 目 前 国内 最 大 的 街景 库 腾 讯 地 图 ， 已 经 覆盖 了 152 个 





< 同 


刘 证 四 于 下 | = 人 | 本 和 - 到 
和 ET 和 | | 到 | | | | se Ee- . 
en Witld 4. 虽 
s 了 学 习 目标 


. AI 配套 App 和 App 路 径 的 区 别 。 


Ta 


“ 街景 地 图 的 调用 。 


街景 地 图 App 界 面 设 计 如 图 6-6 所 示 ， 实 现 功能 如 下 : 


: 单 击 不 同 按钮 ， 跳 转 到 不 同 景点 并 在 浏览 器 显示 。 


单 击 当前 街景 ， 返 回 用 户 所 处 位 置 的 街景 。 





街 香 地 图 
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图 6-6 ”街景 地 图 App 实 例 图 


新 建 项 目 StreetMap， 为 适应 街景 地 图 显示 效果 ， 使 用 横 屏 模式 ，Ul 布 局 为 上 下 两 部 分 ， 上 方 为 选择 街景 ， 下 方 为 WebViewer 组 件 ， 显 示 街 景 地 图 ， 如 图 6-7 所 示 。 
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图 6-7 浏览 器 UI 设计 
表 6-2 是 整个 App 所 需要 的 组 件 。 


表 6-2 街景 地 图 组 件 说 明 


是 从 TT 


Text 街景 地 图 


Screen Screenl | 
ScreenOrientation: Landscape 
Horizontal Horizontal 
Layout 水 平 布 局 Width. Fill parent 
AIrrangzement AIrraneementl 


、、,，， | Text: 天 安 门 
Button User Interface tiananimen 天 安 卜 街头 机 

Width. Fill parent 
_ PE Text: 故 写 
Button User Interface ougong 由 宫 街 坚 和 
Width: Fill parent 
Text: 或 痕 屿 
Width. Fill parent 
Text:， 西湖 
Width. Fl parent 

当前 地 理 位 |Text 当前 街景 

置 街 丸 Width: Fill parent 


|= 


Button User Interface eulaneyu 下 浪 央 街景 





Button User Interface Xihu 西湖 街景 





Button User Intertace this 





FT Ar 要 ee PromptforPermission: 个 选 
WebViewer | User Interface WebVlewerl 记号 入 


UsesLocation， 勾 选 





全 基础 知识 
1. 路 径 


Al 配套 App 在 调试 时 和 App 打 包 后 安装 在 手机 上 的 路 径 并 不 一 致 ， 因 此 在 引用 地 址 时 要 注意 区 分 ， 调 试 完 成 后 进行 打包 要 注意 更 改 路 径 。 例 如 ， 在 Media 上 传 的 home:jpg 文 件 ， 如 果 要 在 Al 配套 App 中 
引用 ， 路 径 为 file:///mnt/sdcard/Applnventor/assets/home.jpg， 如 果 在 App 打 包 后 ， 路 径 为 file:///android asset/home.jpg。 


2. 浏 览 器 定位 


在 前 面 的 章节 我 们 学 习 过 使 用 传感器 定位 ， 而 本 节 内 容 使 用 的 是 浏览 器 定位 。 浏 览 器 定位 使 用 HTML5 的 地 理 定位 ， 通 过 浏览 器 直接 获取 用 户 的 经 度 和 纬度 。 在 WebViewer 组 件 中 针对 地 理 定位 有 两 个 
属性 选择 ， 一 是 是 否 给 出 用 户 对 话 框 PromptforPermission ， 二 是 是 否 使 用 地 理 位 置 UsesLocation。 


@@ 樟 块 编辑 
1. 查 找 URL 


街景 地 图 主要 是 调用 腾讯 街景 地 图 的 URL， 在 计算 机 端 打 开 腾 讯 地 图 网 址 http://map.qq.com， 搜 索 故 官 ， 在 结果 中 选择 街景 ， 如 图 6-8 所 示 。 在 地 址 栏 会 获得 类 似 http://map.qq.com/? 
lc=2#pano=10011507120328133212000&heading=355&pitch=0&zoom=1 这 样 的 网 址 ， 这 就 是 我 们 要 找 的 URL， 用 同样 的 方法 可 以 获取 其 他 景点 的 URL。 














巡回 首页 


Wenn 
由 故 言 
D10.65131892 
北京 市 东城 长 只 山 前 街 4 号 





图 6-8 ”获取 街景 URL 


2. 固 定 景点 街景 


获取 好 上 述 景点 的 URL 后 ， 改 变 浏览 器 URL 即 可 ， 如 图 6-9 所 示 。 





3. 当 前 位 置 街景 


要 使 用 当前 位 置 街景 ， 需 要 使 用 HTML5 语 言 和 街景 地 图 的 API (地 址 : http://open.map.qq.com/javascript_v2/guide-pano.html) ， 文 件 命 名 为 soso.html， 如 代码 6-1 所 示 。 


代码 6-1 soso.html 


<1DOCTYPE html> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>SOSOMap - 街景 图 层 PanoramaLayer </title> 

<1!1-- 引 入 SOSo 街 景 地 图 API， 使 用 时 记得 替换 YourKey! --> 

<script src="http://map.soso.com/api/v2/main.js?key=9e7c7a85c670b 
c5c85ffd9acla40e662"></script> 

<script> 

if (window.navigator.geolocation){ 

navigator.geolocation.getCurrentPosition (success); 


’ 

// 定位 成 功 

function success (Dosition) { 

Var lat=position.coords.latitugde; 

Var lng=position.coords.longitugde; 

Var center; 

center = new soso.maps.LatLng (lat,1ng); 
// 创建 街景 服务 类 实例 

Var ps = new soso.maps.PanoramaService (); 


// 使 用 getPano 方 法 吸附 街景 



























































Ps .getPano (center,1000, function (PanoInfo) { 

Var numid=panoInfo.svid; 

var reurl="http://map.soso.com/#pano="+numidt+"&heading=310&pitch=20&zoom= 
l&key=yourkey™"; 

window.location.href=reuril; 


3; 

















} 
</script> 
</head> 
<body> 
</body> 
</html> 


上 述 代 码 对 于 没有 JS 基 础 的 同学 略 有 难度 ， 其 实 大 部 分 代码 是 官方 提供 的 APl 语 言 ， 只 是 调用 了 HTML5 语 言 的 地 理 定 位 ， 初 学 者 可 以 直接 复制 代码 使 用 ， 不 用 关心 内 部 的 细节 。 将 soso.html 连 同 首页 图 
片 home.jpg 通 过 Media 面 板 上 传 ， 代 码 调用 如 图 6-10 所 示 。 


AI 配 套 App 使 用 该 地 址 
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图 6-10 ”当前 位 置 街 最 
加 任务 小 结 


本 节 介 绍 了 如 何 使 用 AI 浏览 器 调用 街景 地 图 ， 以 及 通过 浏览 器 获取 地 理 位 置 的 方法 。 浏 览 器 结合 各 类 地 图 API 的 调用 ， 可 以 创造 出 丰富 多 彩 的 应 用 。 


侣 自我 详 践 
1 获取 景点 静态 地 图 的 AP。 


2. 学 习 使 用 百度 、 高 德 等 地 图 的 API 调 用 。 


6.3 _ JavaScript 交互 


全 难度 太太 


为 提高 Al 的 扩展 性 ，MIT 开 发 人 员 在 WebViewer 中 增加 了 WebViewString 这 一 属性 ， 使 得 Al 组 件 可 以 和 网 页 中 的 JavaScript 进 行 交互 。 通 过 这 一 功能 ,可 以 极 大 扩展 Al 的 使 用 ， 如 使 用 JS 的 APl， 使 用 
jQuery 的 第 三 方 组 件 。 本 节 将 通过 一 个 汽车 码 表 图 来 说 明 两 者 之 间 是 如 何 进行 交互 的 。 





@ 合 学 习 目标 
.WebViewString 的 使 用 。 
JavaSctipt 中 调用 AI 的 传 值 。 
芍 人 务 措 述 


本 节 的 示例 App 仅 是 一 个 简单 游戏 ， 还 谈 不 上 是 一 个 应 用 ， 界 面 如 图 6-11 所 示 ， 它 实现 了 一 个 简单 功能 ， 通 过 Al 中 的 滑 块 组 件 移动 ， 下 方 的 汽车 码 表 同 时 变动 。 





图 6-11 汽车 码 表 App 实 例 图 
CD Ungit 


新 建 项 目 speed， 上 方 为 一 个 Slider， 下 方 为 NebViewer 组 件 ， 如 图 6-12 所 示 。 


名 三 
screan | WW heb Yiewrer | 





Renarne Delsate 


Mad 


| ery ,minN.)s 
PACraph.c..n.core.js 
RCraph.c...umamic.]s 
RCraph.c..ffects.|a 
FGraph fuel 3 
cemos.css 


Speechtml 
由 Fll8 ... 


图 6-12 ”汽车 码 表 UI 设 计 
表 6-3 是 整个 App 所 需要 的 组 件 。 


表 6-3 汽车 码 表 组 件 说 明 


Maxvalue，100 
_ Minvalue: 0 

Slder User Interface | Sliderl _ 
ThumbPosition: $0 


Width: Fill parent 


HomeU1l: 
显示 汽车 码 表 file : ///mnt/sdcard/AppInventor/ 


WebViewerl 


WebViewer | User Intertace 





assets/speed.html 





全 基础 知识 
1. 码 表 动 画 


通过 图 6-12 可 以 看 到 ， 界 面 设 计 比较 简单 ， 主 要 是 传 了 比较 多 的 JS 文件 ， 这 里 的 Js 库 使 用 的 是 rgraph 网 站 中 的 。 该 网 络 专门 用 Js 做 各 种 各 样 的 图 例 ， 汽 车 码 表 的 示例 在 
http://www.rgraph.net/demos/fuel-interactive.html， 如 图 6-13 所 示 。 





图 6-13 ”汽车 码 表 ]S 库 


源 文件 如 代码 6-2 所 示 。 


代码 6-2 汽车 码 表 源 文件 





<!DOCTYPE html > 
<html> 
<head> 
<link rel="stylesheet" href="demos.css" type="text/css" 

media="screen" /> 

<script src="http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/14943/0EBPS/Text/../libraries/RGraph.common.core.js" ></script> 
<script src="http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/14943/0EBPS/Text/../libraries/RGraph.common.dynamic.js" ></script> 
<script src="http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/14943/0EBPS/Text/../libraries/RGraph.common.effects.js" ></script> 
<script src="http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/14943/0EBPS/Text/../libraries/RGraph.fuel.js" ></script> 

<script src="http://ajax.googleapis.com/ajax/libs/ 

jquery/1.10.2/jquery.min.js"></script> 
























































































































































<!--[if lt IE 9]><script src="http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/14943/0EBPS/Text/../excanvas/excanvas.js"> 
</script><! [endif]--> 
<title>An interactive Fuel chart</title> 

















<meta name="description" content="An interactive Fuel chart" /> 
<meta name="robots" content="noindex,nofollow,nofollow" /> 
</head> 
<body> 
<hl>An interactive Fuel chart</h1> 
<canvas id="cvs" width="200" height="200">[No canvas 
support]</canvas> 
“aoript> 
$ (document) .ready (function () 


{ 


























Var fuel = new RGraph.Fuel ({ 
1 vove”,; 
min:0, 
max: 100, 
value: 96, 
options: { 
aqjustable: true, 
scale: { 
visible: true 








}) .draw () 
}) 
</script> 
<p> 
<a href="./">&laquo; Back</a> 
</p> 
</body> 
</html> 


通过 代码 分 析 ， 可 以 看 到 码 表 的 指针 主要 是 value 值 为 96 这 一 行 。 我 们 通过 更 改 这 一 数字 来 达到 汽车 码 表 的 变动 ， 同 时 增加 适应 手机 页 面 的 meta 标 签 。 
2.JS 与 Al 交互 


JS 与 Al 交互 的 原理 是 在 Al 的 浏览 器 中 增加 了 一 个 内 置 的 JS 方法 ， 即 window.Applnventor.getWebViewString(， 通 过 这 个 方法 可 以 获得 Al 组 件 的 传 值 ， 而 window.Applnventor.setWebViewsString() 
可 以 将 JS 的 值 传 回 Al 组 件 ， 本 节 的 内 容 使 用 前 者 。 


根据 这 一 特性 ， 可 以 扩展 Al 的 使 用 。 试 举 几 个 应 用 案例 : 


1) JavaScript API， 各 大 地 图 厂商 推出 的 APl 都 有 JavaScript， 可 以 扩展 地 图 在 Al 中 的 应 用 。 
2) Javascript 容 易 展示 动画 效果 ， 如 本 节 案 例 。 
3) Javascript 有 完善 的 框架 和 第 三 方 库 ， 如 jQuery。 


4) 融 悉 Javascript 的 读者 ， 可 简化 编程 。 如 个 人 所 得 税 计算 ， 使 用 Al 也 可 以 ， 但 模块 将 会 比较 多 ， 若 使 用 Js 则 代码 较 少 。 


@@ 樟 块 编辑 


1. 传 值 到 JS 
Al 端 的 编程 相对 简单 ， 当 滑 块 位 置 变 动 时 ， 将 当前 数值 传 到 WebViewString 中 ， 同 时 浏览 器 转 到 主页 ， 如 图 6-14 所 示 。 


ionchanged 


: [saH ome 





图 6-14 ”获取 滑 块 位 置 


2. 网 页 代码 
根据 汽车 码 表 的 模板 ， 从 Al 的 传 值得 到 ， 赋 予 speed 变 量 ， 并 转化 数值 变量 。 修 改 代码 如 下 ， 见 代码 6-3， 保 人 存 为 speed.html。 同 时 需 将 原 模板 的 Js 文件 和 css 文 件 保存 上 传 到 Al 的 Media 中 。 


代码 6-3 speed.html 


<!IDOCTYPE html > 
<html> 
<head> 
<meta charset="utf-8"> 
<link rel="stylesheet" href="demos.css" type="text/css" media 
="SCreen'" /> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<script src="RGraph.common.core.js" ></script> 
<script src="RGraph.common.dynamic.js" ></script> 
<script src="RGraph.common.effects.js" ></script> 
<script src="RGraph.fuel.js" ></script> 
<script src="jquery.min.js"></script> 
<title>speed</title> 
</head> 
<body> 
<hil>speed</h1l> 
<canvas id="cvs" width="200" height="200">[No canvas 
support]</canvas> 
<script> 
Var speed=+window.AppInventor.getWebViewString (); 
$ (document) .ready (function () 


{ 
























































Var fuel = new RGraph.Fuel ({ 
Ld: eve, 
min:0, 
max: 100, 
value: Speed, 
options: { 
aqjustable: true, 
scale: { 
visible: true 
} 
} 
}) .draw () 


</script> 
<p> 
</p> 
</body> 
</html> 


四 任务 和 结 


本 节 介 绍 了 AI 与 Js 的 交互 操作 ， 不 熟悉 的 读者 需要 学 习 一 些 Js 的 基础 知识 以 加 深 理 解 。 


〇 自我 交 跨 


学 习 使 用 window.Applnventor.setWebViewString()。 


6.4 ActivityStarter 


人 难度 太太 六 


Activitystarter 组 件 可 以 用 来 在 安 卓 系统 中 调用 其 他 的 App 程 序 ， 利 用 这 一 特点 ， 可 以 扩展 Al 的 功能 。 本 节 通 过 制作 一 个 音乐 播放 器 ， 利 用 ActivityStarter 调 用 ES 文件 浏览 器 的 选择 文件 功能 。 





个 学 习 目 标 
， ActivityStattet 组 件 的 使 用 。 
Playet 组 件 的 使 用 。 
CheckBox 组 件 的 使 用 。 

区 { 殉 描述 


本 节 的 播放 机 App 界 面 如 图 6-15 所 示 ， 实 现 通过 选择 SD 卡 上 的 MP3 进 行 播放 、 和 暂停 和 停止 ， 选 择 是 否 循环 播放 ， 通 过 滑 块 调整 音量 大 小 等 功能 。 


选择 路 径 
dl /mnt/sdcard/kgmusic/... 


J]| 阿 宝 - 疙 梁 梁 .mp3 


阿 宝 - 山 丹 丹 化 开 红 
艳 却 .mp3 


和 是 阿 宝 - 走 西 口 ,mp3 


和 尘 但 -上 fwere a 
boy.mp3 

陕 北 民 秽 - 示 万 红 . 
mp3 

谈 芳 兵 - 包子 铺 . 
mp3 


取消 





图 6-15 ”播放 器 App 界 面 
人 ui 设计 


新 建 项 目 CDPlayer， 上 方 为 功能 按钮 ， 包 括 选 择 歌曲 、 播 放 、 和 暂停 、 停 止 ， 使 用 HorizontalArrangement 和 Button。 中 间 为 Slider 按 钮 调整 音量 大 小 ，CheckBox 选 择 是 否 循环 播放 。 下 方 为 CD 图 片 ， 
起 美化 界面 作用 ， 使 用 image 组件， 图 片 为 2.png， 如 图 6-16 所 示 。 
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图 6-16 ”播放 器 UI 设计 
表 6-4 是 整个 App 所 需要 的 组 件 。 


表 6-4 播放 器 组 件 说 明 


组 件 | 所 属 工具 组 U1 属性 


AllienHorizontal: Centor 


Screen screenl i 
Title， 和 滋 响 月 






Horizontal Horizontal 
Lavyout 
AIiransement Arrangementl 


Width: Fill parent 
Text: 选择 歌 
Width: Fill parent 
Text: 播放 
Width: Fill parent 
Text: 藻 售 
Width: Fill parent 
Text: 仿 止 
Width: Fill parent 


Button User Interface selec 选择 歌曲 
Button User Interface play 播放 歌曲 


Button User Interface pause 叔 俘 播放 





Bnutton User Interface stop 停止 播放 








Horizontal Horizontal 
Layout 
AIrangement Arrangement2 


Width: Fil]l parent 
Maxvalue: 100 
Minvalue: 0 
ThumbPosition: $0 
Width.: Flll parent 

z Text: 循环 播放 
循环 播放 Width: Fill parent 


Slider User Interface Sliderl 


CheckBox User Interface CheckBoxl 


Picture: 2.png 
Image User Interface Imagel CD 图 三 Width: 130 
Hegiht: 130 





组 ” 件 所 属 工 具 组 久 名 作 用 UI 属性 


. a 周 用 ES 文 
ActivityStarter Connectivity ActivityStarterl 


件 浏览 认 


Playver Playerl 播放 本 款 认 


全 基础 知识 





Activity 是 安 卓 传统 开发 中 的 四 大 组 件 之 一 ， 可 以 理解 为 组 件 的 容器 ， 不 同 的 Activity 之 间 通 过 Intent 传 递 信息 。Al 中 根据 程序 的 不 同 ， 调 用 方法 可 以 分 为 三 类 。 第 一 类 是 安 卓 系 统 的 原生 应 用 ， 比 如 屏 
幕 设置 、Google 地 图 、 相 机 等 ， 相 应 的 参数 可 以 在 安 卓 的 官方 网 站 (http://developer.android.com/guide/components/intents-filters.html) 查询 ， 如 相机 的 方法 为 : 





Action: android.intent.action.MAIN 
ActivityPackage: com.google.android.camera 
ActivityClass: com.android.camera.Camera 














第 二 类 是 传统 安 卓 开 发 的 App， 如 ES 文件 浏览 器 ， 此 类 App 的 参数 一 般 需 查看 官方 文档 或 使 用 apktool 等 反 编 译 工具 。 调 用 这 些 App 的 前 提 是 手机 中 提前 安装 这 些 程序 。 如 ES 文件 浏览 器 选取 文件 的 方 
法 为 : 














Action: com.estrongs.action.PICK FILE 





第 三 类 是 Al 自己 开发 的 APK 软 件 ， 调 用 方法 较为 固定 ， 涉 及 ActivityPackage 和 ActivityClass 两 个 参数 ，ActivityPackage 的 格式 为 appinventor.ai 邮箱 名 (不 含 @ 及 域名 ) .程序 名 ，ActivityClass 格 式 
为 Package 名 .Screen1。 如 调用 前 面 的 街景 地 图 为 : 


ActivityPackage: appinventor.ai 30090032 .StreetMap 


ActivityClass: appinventor.ai 30090032 .StreetMap .Screen1l 





Activity 调 用 的 参数 含义 见 表 6-5。 
表 6-5 ActivityStarter 参 数 
参 数 2 


Action Intent 区 型 android.intent.action.MAIN 


ActivityPackage Java 程序 包 和 名 com.google.android.camera 





ActivityClass Java 程序 类 名 com.android.camera.Camera 


DataType 数据 类 型 text/plain 








参 数 作 用 示 例 
DataUri 数据 标识 ge0: 52,47 
android.intent.extra.TEXT 
ExtraValue 附加 参数 值 推荐 你 关注 @appinventor 爱好 者 
ResultName 结果 包 


Extrakey 





ActivityStarter 调 用 后 可 返回 文本 值 ， 保 存在 ResultUri 中 。 


代 模块 编辑 
1 循环 播放 模块 


CheckBox 模 块 是 一 个 常用 组 件 ， 每 次 选择 或 取消 要 改变 变量 的 值 ， 图 6-17 是 这 个 模块 常用 的 方法 。 定 义 全 局 变量 loop， 初 始 值 为 false。 CheckBox 选 择 改变 时 ， 取 逻辑 非 ， 真 则 循环 播放 ， 假 则 不 特 
环 。 


WLIIC]] 


de 














图 6-17 循环 播放 模块 


2. 选 择 歌 曲 模块 


按钮 单 击 时 调用 ES 文件 浏览 器 的 选中 文件 方法 ， 选 取 文件 后 获得 的 文件 路 径 返 回 给 Player 组 件 进行 播放 ， 如 图 6-18 所 示 。 


,Afterhctivity 





图 6-18 选择 歌曲 模块 
3. 歌 曲 控制 模块 
播放 、 和 暂停、 停止 这 三 个 功能 有 对 应 方法 ， 比 较 简单 ， 如 图 6-19 所 示 。 
.音量 控制 模块 


使 用 滑 块 来 调整 音量 大 小 ， 最 小 值 为 0， 最 大 值 为 100， 如 图 6-20 所 示 。 





otopn 





图 6-19 ”歌曲 控制 模块 


.PositionLhaneed 





@{E 务 小 结 

本 节 通 过 Activitystarter 的 调用 完成 了 一 个 简单 的 播放 器 App，Activitystarter 通 过 调用 其 他 App 的 功能 ， 扩 展 了 AI 的 应 用 。 常 用 的 Activitystarter 调 用 方法 可 参考 本 书 附录 C。 
人 〇 自我 详 中 

1 增加 播放 列表 。 


2. 美 化 播放 界面 。 


6.5 TinyWebDB 


全 难度 太太 


TinyWebDB 是 在 线 小 型 数据 库 ， 通 过 它 的 使 用 ， 可 以 将 数据 保存 在 网 络 ， 实 现 排 行 榜 、API 等 的 应 用 。 但 是 使 用 前 提 是 自行 搭建 服务 器 ， 本 节 就 来 介绍 如 何 搭建 TinyWebDB 服 务 器 。 





合 关 目标 
.TinyWebDB 服 务 器 的 原理 和 搭建 。 


合 基 而 知识 
TinyWebDB 本 质 上 是 一 个 Web 服 务 器 ， 它 的 功能 有 两 个 : 
1) 用 户 保存 及 更 新 tag 和 value， 服 务 器 上 的 tag 是 独一无二 的 。 
2) 用 户 通 过 tag 读 取保 存 的 value。 


通过 上 面 的 功能 描述 ， 可 以 看 出 它 就 是 一 个 数据 库 的 插入 、 更 新 及 查询 。 另 外 TinyWebDB 定 义 了 特殊 的 方法 。 保 存 及 更 新 时 会 将 数据 传 到 url/storeavalue， 查 询 时 传 到 url/getvalue。 保 存 及 更 新 数据 
服务 器 时 要 求 返回 的 数据 是 JSON 格 式 的 数组 [“STORED”，tag，value]， 查 询 时 要 求 返回 的 数据 是 JSON 格 式 的 数组 [ “VALUE” ，tag，value]。 


@O 服 务 器 搭建 


了 解 了 上 述 原理 ， 就 可 以 使 用 自己 熟悉 的 编程 语言 和 服务 器 进行 搭建 。App Inventor 官 方 给 出 的 代码 是 在 Google GAE 的 Python 环境 下 搭建 的 ， 由 于 国内 无 法 访问 GAE， 我 们 改 在 新 浪 SAE 的 Python 环 
境 下 搭建 。 


SAE 的 Python 环境 内 置 了 Webpy 框 架 ， 这 里 使 用 Webpy 框 架 进行 搭建 ， 搭 建 前 在 数据 库 中 新 建 test 表 ， 字 段 名 为 tag 和 value， 数 据 类 型 为 Varchar， 长 度 为 255。 


在 SAE 中 新 建 Python 代码 后 ， 会 自动 生成 index.wsgi 文 件 ， 将 下 面 的 代码 复制 到 index.wsgi 即 可 。 








# -*- coding: utf-8 —*-— 
i t sae 





'Jstoreavalue', "StoreAValue", 
'/getvalue', 'GetValue', 
) 
class StoreAValue: 
def GET (self): 
return "ok" 
def POST (self): 
data = web.input () 
aitag = data.tag 
aivalue = data.value 
db = web.dqatabase 人 
qbn= 'mysql ' ,host=sae.const.MYSQL HOST, port=int (sae. 
Const .MYSQL PORT), 
USer=Sae.Cconst.MYSQL USER, pw=sae.const.MYSOQOL PASS， 
qb=sae.const.MYSQL DB,charset='utf8 ' ) 
results =db.select ('test', where="tag="'"+taitag+""'") 
if len(results)==0: 
db.insert('test', tag=aitag,value=aivalue) 












































else: 





db.update('test', where="tag='"+aitag+"'",value=aivalue) 

result = ["STORED", aitag, aivalue] 

return json.dumps (result) 
class GetValue: 

def GET (self): 

return "OK" 
def POST (self): 
data = web.input () 
aitag = data.tag 


























db = web.dqatabase 人 
dbn="'mysql',host=sae.const .MYSQOL HOST, port=int (Sae . 
const .MYSQL PORT), 加 
USer=Sae.Const .MYSQL USPR，Pw=Sae.Const .MYSQL PASS, 
qb=sae.const.MYSQL DB,charset= "utft8 ' ) 
results =db.select ('test', where="tag="'"+aitag+""'") 
if len(results)==0: 
aivalue=None 





















































else: 
for a in results: 
aivalue=a.value 
result = ["VALUE", aitag, aivalue] 
return json.dumps (result) 
app = web.application (urls, globals()) .wsgifunc () 
application = sae.create wsgi app (app) 





合 吉 户 涡 蛤 证 


新 建 项 目 TinyWebDB 进 行 服务 器 测试 ，UI 如 图 6-21 所 示 ， 模 块 如 图 6-22 所 示 。 
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图 6-21 ”TinyWebDB 验 证 UI 


将 TinyWebDB 服 务 器 地 址 设置 为 http://3.pythonwei.sinaapp.com (注意 后 面 没有 “/”) 进行 调试 。 


TinyWebDB 除 了 可 以 用 来 保存 网 络 数 据 外 ， 也 可 以 使 用 getvalue 的 方法 来 构建 APl， 当 然 也 可 以 用 Web 组 件 替 代 ， 请 结合 第 7 章 内 容 进行 修改 。 
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图 6-22 ”TinyWebDB 验 证 模块 


人 @ 任 务 小 结 
本 节 通 过 TinyWebDB 服 务 器 原理 的 介绍 ， 学 习 如 何 搭建 TinyWebDB 服 务 器 ， 读 者 可 以 使 用 自己 熟悉 的 编程 语言 进行 完善 
〇 自我 中 


将 第 5 章 的 游戏 增加 排行 榜 功 能 。 


第 7 草 ”数据 交互 应 用 


本 章 继续 深入 学 习 网 络 应 用 ， 注 重 手机 客户 端 与 服务 器 的 交互 ， 服 务 器 的 搭建 需要 网 络 编程 基础 。 


候 难 度 ww 


天 和 气 预报 通过 城市 返回 当天 的 天 气 和 图 片 ， 程 序 调 用 百度 地 图 的 AP1， 相 比 豆瓣 API1， 返 回 的 是 一 个 庶 套 格式 的 JSJON ， 解 析 稍 复杂 。 





习 学 习 目 标 
API 的 使 用 。 
" 复杂 JSON 解 析 。 
" Web 组 件 。 
区 任务 描述 
天 气 预报 App 界 面 设计 如 图 7-1 所 示 ， 实 现 功能 如 下 : 
. 输入 城市 名 ， 单 击 “ 确 定 ” 按 钮 返回 当前 天 气 和 天 气 图 片 。 


如 没有 当前 城市 ， 返 回 空白 。 


本 88 03:09 
大 气 秽 撤 








司 六 09 月 06 日 (实时 : 21%C) ,小雨 , 南 凤 3-4 级 ,24 -~ 
/A 





图 7-1 天 气 预 报 App 实 例 界 面 
人 ul 设计 


新 建 项 目 Weather，UI 很 简单 ， 组 件 为 TextBox、Button、Label、Image 及 Web， 如 图 7-2 所 示 ， 表 7-1 为 相关 组 件 说 明 。 
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图 7-2 天 气 预报 UI 设计 


表 7-1 天 气 预 报 组 件 说 明 


ED 


Horizontal Horizontal > 、 
水 平 布 局 妹 认 


Layout 
Airangement AIirangeiment] 

TextBox TextBoxl 输 人 城市 名 Hint: 输入 城市 
Web Webl 犹 取 天 气 预 报 API | 默认 


全 基础 知识 











本 程序 使 用 的 天 气 预 报 APl 是 百度 地 图 车 联网 的 APl， 网 址 为 http://developer.baidu.com/map/index.php?title=car/api/weather，APIl 调 用 方式 为 GET， 地 址 为 
http://api.map.baidu.com/telematics/v3/weather?location= 北 京 &output=json&ak=yourkey， 其 中 ak 参 数 为 开发 者 申请 的 密 钥 。 返 回 JSON 数 据 为 : 


"error™: OO， 


"status": "success", 
"date": "2014-09-06", 
"results": [ 


"currentCity": "北京 "， 
"PmM25" 。 AL9307 
"index": | 





wi 





LT 











up 





why 











"hh 





Mal 











aT 











eh 


tp: 


tp: 


tp: 


tp: 


tp: 


tp: 


tp: 


tp: 


//api. 


//api. 


//api. 


//api. 


//api. 


//api. 


], 


} 


"title"™: " 穿 衣 ""， 

WA " 热 "， 

tipt": " 穿 衣 指数 "， 

"des": "天 气 热 ， 建 议 着 短 衬 、 短 裤 、 短 薄 外 套 、T 恤 等 夏 


季 服 装 。， 











"title": "洗车 "， 
mzsn : " 较 适 宜 "， 
"tipt": "洗车 指数 "， 

"des": " 较 适 宜 洗车 ， 未 来 一 天 无 雨 ， 风力 较 小 ， 擦洗 一 新 
的 汽车 至 少 能 保持 一 天 。" 











"title":; "旅游 "， 

nmzsn : 适宜 

"tipt" : "旅游 指数 "， 

"des": "天 气 较 好 ， 丝 上 毫 不 会 影响 您 出 行 的 心情 。 温 度 适 宜 
又 有 微风 相伴 ， 适 宜 旅 游 。" 











"title"™: "感冒 "， 

"zsn : " 少 发 " 

"tipt": "感冒 指数 "， 

Te 无 明显 降温 过 程 ， 发 生 感 冒 机 
率 较 低 。" 








"title"™: "运动 Ww 
"zsn : " 较 适 宜 " 
TE "运动 指数 "， 











"des" : "天 气 较 好 ， 户 外 运动 请 注意 防晒 。 推 荐 您 进行 室内 运动 。" 


"title": "紫外 线 强度 "， 

ZSn : WE 

"tipt": "紫外 线 强 度 指数 "， 

"des": "紫外 线 强 度 较 弱 ， 建 议 出 门 前 涂 擦 SPF 在 12~15、 
PA+ 的 防晒 护肤 品 。" 








"weather data": |[ 


{ 





"gate": " 周 六 09 月 06 日 (实时 : 27°C)"， 
"qdqayPictureUr1" : 


map.baidu.com/images/weather/day/duoyun.png", 


map. 


map. 


map. 


map. 


map. 


map. 





"nightPictureUr1" : 





baidu.com/images/weather/night/yin.png", 


"weather": "多 云 转 阴 "， 
"wind": "微风 "， 
"temperature": "28 ~ 21C" 





"date": " 周 日 uw 
"dayPictureUril": 


baidu.com/images/weather/day/yin.png", 


"nightPictureUr1" : 








baidu.com/images/weather/night/gqing.png", 


"weather": " 阴 转 上 晴 "， 
"wind" : "微风 "， 
"temperature": "29 ~ 21°C" 


"date": " 周 一 中 
"dayPictureUr1" : 


baidu.com/images/weather/day/gqing.png", 


"nightPictureUr1" : 








baidu.com/images/weather/night/yin.png", 


"weather": " 睛 转 阴 "， 
"wingq" : " 北 风 3~4 级 "， 
"temperature": "28 ~ 18C" 


"date": "周二 mr 
"qdqayPictureUr1" : 


baidu.com/images/weather/day/leizhenyu.png", 


"nightpictureUrl™: 





.baidu.com/images/weather/night/duoyun.png", 





"weather": "雷阵雨 转 多 云 "， 
"wind" : "微风 "， 
"temperature": "26 ~ 18C" 





该 JSON 数 据 比 较 复杂 ， 是 一 个 嵌 套 的 JSON 数 据 ， 包 括 Json Object 和 Array， 


解析 时 需要 逐 层 进行 。 


信 模 决 编辑 


1. 定 义 全 局 变量 


其 中 error 人 参数 为 0 说 明 没有 错误 ， 参 数 为 -3 表示 城市 名 错误 。 城 市 需要 读 取 的 数据 是 results 一 weather data 一 当天 数据 ， 


定义 全 局 变量 ak， 为 开发 者 密 钥 ， 该 密 钥 从 百度 开发 者 申请 ， 可 参考 网 站 相关 文档 ， 如 图 7-3 所 示 。 





2.Url 组 件 


根据 天 气 预报 的 API 得 知 ， 变 动 的 主要 是 城市 名 ， 通 过 TextBox 组 件 获取 城市 名 ， 这 里 需要 注意 的 是 由 于 城市 名 是 中 文 ， 需 要 进行 Url 编码 后 访问 ， 如 图 7-4 所 示 。 


UTIETmCOOE 





图 7-4 Ud 组 件 
3.API 解 析 
Web 组 件 获 取 到 服务 器 响应 后 ， 会 返回 一 个 头 部 信息 (head) ， 头 部 信息 包含 响应 码 responsecode， 常 用 的 responsecode 如 下 : 
. 200 OK ， 请 求 已 成 功 ， 请 求 所 希望 的 响应 头 或 数据 体 将 随 此 响应 返回 。 
404 Not Found， 请 求 失败 ， 请 求 所 希望 得 到 的 资源 未 在 服务 器 上 发 现 。 
500 Intetnal Server Error， 服 务 器 端的 源 代码 出 现 错误 。 


对 返回 的 信息 先 经 过 JSON 解 析 ， 然 后 赋值 给 局 部 变量 name， 先 读 取 error 信 息 ， 如 果 没 有 错误 ， 继 续 解析 天 气 预报 的 相关 信息 ， 如 图 7-5 所 示 。 这 里 要 注意 的 是 由 于 有 Json Array， 也 就 是 ]， 因 此 要 使 
用 list 中 的 select 选 取 对 应 的 序列 。 如 果 查 询 明 天 、 后 天 的 天 气 ， 则 依次 选取 序列 为 2、3。 
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图 7-5 API 解 析 


全 { 务 小 结 


百度 的 天 和 气 预 报 API 是 互联 网 API 中 的 常见 格式 ， 一 般 要 申请 密 铀 ，JSON 数 据 有 时 会 比较 复杂 。 


1. 解 析 明 天 、 后 天 的 天 气 预报 。 


2. 使 用 位 置 传感器 解析 天 气 预报 。 


API 尽 管 好 用 ， 但 并 不 是 常 有 ， 有 时 候 需 要 自己 来 制作 API， 搭 建 服务 器 。 比 如 校园 新 闻 ， 学 校 的 服务 器 不 会 给 你 开放 一 个 AP1， 这 时 就 需要 自己 来 建立 一 个 APl。 


wwe 一 rm 
ZN 有 
二 
业 
| 
| 











API 服 务 器 搭建 。 


校园 新 闻 App 界 面 设计 如 图 7-6 所 示 ， 实 现 功 能 如 下 : 


` 单 击 “校园 新 闻 ” 按 钮 后 返回 校园 网 的 最 新 新 闻 。 


gO (72 区 MI| 05:20 dO 2 会 蜀 放 | 二 05:20 


校园 新 闻 MIT Al2 Companion 


校园 新 间 北京 大 学 以 信息 化 手段 助力 新 生 
报到 和 迎新 工作 
教育 部 领导 来 北大 调研 相 天 学 科 
建设 情况 
校 领导 赴 广 西 出 遍 定 同 选 调 生 座 
谈 会 
由 北京 太 学 参与 建设 的 北京 协同 
创新 研究 院 揭牌 成 立 
北京 大 学 6652 人 参与 “共产 党 员 
献 莹 心 " 捐 献 活动 等 集 善 
款 472044.3 元 
《北京 大 学 章程 》 起 草 委 员 会 召 
-会 议 讨论 章程 草案 调整 修改 蕊 
见 
王 思 哥 赴 肖 家 河 教师 住宅 项 目 现 





图 7-6 ”校园 新 闻 App 实 例 界 面 


CD Uligit 


新 建 项 目 news，UI 只 有 ListPicker 和 Web， 如 图 7-7 所 示 ， 表 7-2 为 相关 组 件 说 明 。 


[Diaplew hirlden componmernts in Yipwer Smeanl 


ListPicker] 
棱 园 新 闻 [TP 


Rename Delete 
Non-visible compenents 





图 7-7 校园 新 闻 UI 设 计 


表 7-2 校园 新 闻 组 件 说 明 


En ET 
screen | 一 |saeen | 一 | Text 校园 新 闻 
ListPicker ListPicker!] 显示 新 闻 Text: 校 四 新 闻 
Web Connectivity 炙 取 校园 新 闻 API 利夫 


人 模块 编辑 








1. 服 务 器 编程 


校园 新 闻 主 要 是 服务 器 的 编程 ， 尽 量 将 数据 处 理 都 放 在 服务 器 端 ， 客 户 端 只 需 直接 读 取 数据 。 以 北大 校园 新 闻 网 为 例 ， 它 的 最 新 新 闻 地 址 页 面 为 http://pkunews.pku.edu.cn/xxfz/node 185.htm， 如 
图 7-8 所 示 。 


新 闻 更 新 后 仍然 是 这 个 网 址 ， 只 是 数据 进行 更 新 ， 我 们 手机 客户 端 需要 读 取 最 新 的 前 10 条 新 闻 ， 因 此 服务 器 端的 编程 就 是 将 这 个 页 面 抓 取 后 进行 处 理 ， 将 最 新 的 10 条 新 闻 返 回 客户 端 。 


放 北大 要 同 


:: 北京 大 字 以 信息 作 手 芭 助 才 新 生 报 到 和 见 新 工作 

:: 热 育 部 领导 来 北 太 调 研 相 关 学 科 于 设 情况 

:: 杭 领 导 赴 广西 出 席 定向 选 员 半 座 诬 健 

:; 由 北京 大 字条 与 建英 的 北京 协同 创新 研 完 院 揭 牧 成 站 

:: 北京 大 字 6652 八 做 与 “共产 党 员 卫 爱心 ”捐献 消 动 筹集 兰 款 472044. 3 元 
北京 大 学 章程 四 起 音 委 员 会 召开 会 以 讨 伦 章程 草案 册 整 售 趴 音 见 

:: 王 恩 册封 肖 家 河 教师 世 宅 项 目 现 场 案 看 施工 进展 情况 
“亚太 择 主 钥 织 促进 业 神 健康 创新 合作 研 计 研 ” 在 北京 大 学 召开 

:; 北大 代表 团 竺 加 第 二 册 有 染 坦 循 国际 大 学 祺 长 哗 坛 

:: 西 控 投资 向 北京 太 学 捐 风 两 亿 元 支持 建筑 与 具 观 设计 学 院 卡 展 





:: 中 国 化 学 会 弟 29 届 学 术 年 会 在 北京 大 学 开 短 
图 7-8 校园 新 闻 网 页 


服务 器 端的 编程 语言 这 里 使 用 PHP， 服 务 器 选择 新 浪 的 SAE， 地 址 为 http://sae.sina.com.cn， 注 册 后 新 建 应 用 程序 ， 选 择 PHP 环 境 ， 如 图 7-9 所 示 。 





"二 绒 吉 名 (App name) | appie SInaapp.com 
注册 成 功 后 ， 称 注册 的 Appname.vipsinaapp.com 同样 可 以 使用 


em i oF re | 忆 一 5 二 -全 于 二 吕 ; 
于 由 莹 于， 子 寺 组 厅 ， 长 良 轴 村 平 re HT tH 证 二 小 坊 首 有 中 





appinventor 


四 用 的 中 训 名 称 ， 供 量 趟 用， 


PHP™= Python 3 





图 7-9 SAE 创 建 应 用 
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训 
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可 以 方便 地 解析 HTML 语 言 ， 解 析 HTML 语 言 使 用 Simple HTML DOM Parser 的 一 个 库 文件 (中 文 手 册 在 http://www.ecartchina.com/php-simple-html-dom/manual.htm) 。 通 二 
源 代码 ， 新 闻 字 段 的 HTML 代 码 为 


<td class="bel2"><a href="2014-09/04/content 284710. 
htm" target=" pblank"> 北 京 大 学 以 信息 化 手段 助力 新 生 报 到 和 迎新 工作 </a> 














样式 使 用 了 表格 ， 因 此 可 以 通过 读 取 表 格 的 进行 解析 ， 通 过 解析 后 发 现 得 到 的 数据 有 新 闻 内 容 和 空格 ， 通 过 两 次 解析 获取 最 新 的 10 条 新 闻 ， 最 后 以 JSJON 格 式 输出 ， 服 务 器 端 代码 命名 为 news.php， 代 
码 如 下 (注意 加 载 库 文件 simple_html dom.php) 。 


<?php 
include "simple html dom.php"; 
$html = file get html ('nttp://pkunews.pku.edu.cn/xxfz/node 185. 
htm"'); 

foreach ($html->find('table tdl[align=left]') as $e) 
$a[]=$e->plaintext;} 
for ($i=2; $i<22;S$i=$i+2){ 

$b[]=$a[s$i]; 
} echo json encode ($b); 
?> 






































将 news.php 和 simple_html dom.php 上 传 至 SAE 服 务 器 ， 得 到 服务 器 的 地 址 http://1.appi2.sinaapp.com/news.php。 


2. 手 机 端 模块 


手机 端 代码 比较 简单 ， 无 需 进 行 二 次 解析 ， 如 图 7-10 所 示 。 


,JsonlextDecode 


sonTexi1 


VYphen ] rl] 


do 三 To TE 





图 7-10 “手机 端 模块 
加 人 务 4 结 
通过 服务 器 端的 编程 可 以 大 大 丰富 AI 网 络 端 的 交互 应 用 ， 学 习 一 门 网 络 编程 语言 也 是 必需 的 ，pPHP 和 Python 都 是 比较 简单 的 入 门 编程 语言 
〇 自我 实 中 
1 ,建立 自己 学 校 的 新 闻 API。 


2. 完 善 校园 应 用 。 


7.3 注册 登录 


人 难度 太太 六 


注册 登录 系统 是 数据 交互 最 常用 的 模块 ， 为 了 安全 一 般 采 用 Post 方 式 进行 提交 ， 密 码 还 要 采用 Md5 加 密 。 这 里 将 介绍 如 何 制作 一 个 简单 的 注册 登录 界面 。 





"a 


| Usemname 


二 


全 学习 目标 
. PasswordTextBox 的 使 用 。 
Web 组 件 Post 方 法 。 
Screen 传 值 。 

针 [E 甸 描 术 


注册 登录 App 界 面 设计 如 图 7-11 所 示 ， 实 现 功能 如 下 : 


四 47 全 BB NI 08:12 四 147 = [DB YI| CE 08:12 


注册 豆 : 发 二 欢迎 1 





图 7-11 注册 登录 App 实 例 界 面 
. 老 用 户 登 录 正 确 跳 转 到 新 页 面 ， 新 页 面 标题 栏 显示 用 户 昵 称 ; 用 户 名 密码 错误 显示 提示 。 
:新 用 户 注册 页 面 ， 输 入 用 户 名 、 密 码 、 昵 称 ， 任 意 为 空 显 示 错 误 提 示 ， 用 户 名 重复 错误 提示 ， 注 册 成 功 后 跳 转 到 新 页 面 ， 页 面 标题 栏 显 示 用 户 昵称 。 
CD Uligit 


新 建 项 目 reg， 包 括 两 个 Screen ，Screen1 为 注册 和 登录 ， 使 用 两 个 TableArrangement， 默 认 显示 TableArrangement， 隐 藏 注册 的 TableArrangement。 添 加 两 个 Web 组 件 及 Notifier 组 
件 ，Screen2 为 登录 后 程序 界面 ， 这 里 为 空白 ， 如 图 7-12 所 示 ， 表 7-3 为 相关 组 件 说 明 。 


Hl Screen' 
BE Tablesrranpement 


AlLabell 
BIL abels 
是 ITeyxtBoy1 
= passworllertBorl 
国 Btn_ New 
Et Login 
日 Tablekrran Umentz 

R|| abel3 
BlTextB one 
A|Label 
apasswaorrTextB ow? 
只 |L abels 
二 Text 
Mgtn_ Rey 

性 web_rel 

Notifier 

者 we Duin 


ReName DelBIe 


Nen-vistble componments 


a 有 
下 


Vieb_rey Notfierl Yeb_login 





图 7-12” ”Screen1UI 设 计 


表 7-3 注册 登录 组 件 说 明 


a OU 


AlienHorizontal: 
SCIeen Screenl Center 
Text: 注册 登录 


Columnns: 2 


TableArraneement | Layout TableArranegement] i g 
OWS: 3 


Label Labell 用 户 名 Text， 用 户 名 





组 件 所 属 工具 组 全 名 


PasswordTextBox 年 人 从 仙 章 人 T 人 
Button 显示 注册 弄 面 |Text: 新 用 成 
Button 发 壕 登 录 数 据 ”| Text， 登录 


Columns: 2 





Text， 革 全 





多 





TableArrangement |Layout TableArrangement2 注册 布局 Rows: 4 
Visible: hidden 


Label Text; 用 户 名 
TextBox 和 性 信人 用户 名 
passwordTextBox 输入 密 仙 

TextBox 输入 虐 称 nt: 
Button 发 硫 注册 数据 ”| Text: 注册 
Web 注册 服务 天 1 

Web 登录 服务 器 














Notifiler User Interface 提示 谢 目 
Screen 
全 基础 知识 
服务 器 和 浏览 器 (客户 端 ) 是 如 何 通信 的 呢 ? 当 我 们 在 浏览 器 端 输入 Url 后 ， 浏 览 器 给 Web 服 务 器 发 送 了 一 个 Request (请 求 ) ， 服 务 器 接 到 Request 后 进行 处 理 ， 生 成 相应 的 Response (响应 ) ， 然 


后 发 送 给 浏览 器 ， 浏 览 器 解析 Response 中 的 HTML， 这 样 我 们 就 看 到 了 网 页 ， 过 程 如 图 7-13 所 示 。 


Request 


ae 





Response 





Web Server 


图 7-13 ”Web 通信 


Request 请 求 消息 的 结构 分 为 三 个 部 分 ， 第 一 部 分 叫 Request line， 第 二 部 分 叫 Request header， 第 三 部 分 是 body。header 和 body 之 间 有 个 空 行 ， 如 图 7-14 所 示 。 

第 一 部 分 中 的 METHOD 表 示 请 求 方法 ， 比 如 “GET”、“POST”，path-to-resoure 表 示 请 求 的 资源 ，HTTP/version-number 表 示 HTTP 协 议 的 版 本 号 。 

GET 方 法 : 常用 浏览 器 的 访问 和 下 载 就 是 GET 方 式 ，GET 用 于 信息 获取 ，GET 请 求 的 参数 会 在 URL 显 示 ， 以 & 隔 开 。 前 面 章 节 的 API 访 问 也 是 采用 了 GET 方 式 。 

POST 方法 : 常用 的 是 表单 提交 、 上 传 文件 。POST 内 容 不 会 在 Url 显示 ， 而 是 在 Body 中 ， 安 全 性 相对 较 高 。 

第 二 部 分 Request header 内 容 必须 要 包含 Content-Length 用 以 指明 请 求 数据 的 长 度 。 其 他 还 有 Accept (浏览 器 可 接受 的 MIME 类 型 ) 、Accept-Charset (浏览 器 支持 的 字符 编码 ) 、Accept- 
Language (浏览 器 支持 的 语言 ) 、Cookie、Host 等 。 

Content-Type: 定义 网 络 文件 的 类 型 和 网 页 的 编码 ， 决 定 浏 览 器 将 以 什么 形式 、 什 么 编码 读 取 这 个 文件 ， 如 果 未 指定 Content-Type， 默 认为 TEXTVHTML。 其 中 application/x-www-form- 
urlencoded 用 于 表单 提交 ，multipart/form-data 用 于 文件 上 传 。 

第 三 部 分 为 body， 如 Post 提 交 的 表单 内 容 。Get 方 法 body 为 空 。 


服务 器 返回 Response 消 息 的 结构 如 图 7-15 所 示 ， 也 分 为 三 部 分 ， 第 一 部 分 叫 Response line， 第 二 部 分 叫 Response header， 第 三 部 分 是 body。header 和 body 之 间 也 有 个 空 行 。 


METHOD /path - to -resource HTTP/ Version-number 


Header-Name-l1: value 


Header-Name-2: value 


Optionalrequest body 





图 7-14 ” Request 消息 结构 


HttpiYersion-number atus code Me saEe 


Header-Name-l: value 


Header-Name-2: value 


Ophonal Response body 





图 7-15 Response 消息 结构 
第 一 部 分 Http/version-number 表 示 HTTP 协 议 的 版 本 号 ，statuscode 和 message 即 前 面 章节 所 述 的 200ok、404Not Found 等 。 
二 部 分 的 Response header 包 括 Content-Length (数据 长 度 ) 、Server (服务 器 信息 ) 、Location ( 跳 转 ) 等 。 
三 部 分 body 即 服务 器 返回 内 容 。 
人 @ 模 块 编辑 


1. 服 务 器 端 


服务 器 端 仍 然 使 用 PHP 语 言 ， 在 SAE 环 境 搭建 。 注 册 登 录 要 使 用 到 | 数据 库 ， 在 SAE 端 初始 化 数据 库 ， 如 图 7-16 所 示 。 
OUT 
HHIE 


_ _ fi 
号 bh 用 


MySQL 
MYSGL 是 SAE 为 用 户 提 殿 的 务 布 陈刚 YSOL 款 据 库 集 程 服务， 可 以 卉 


区 档 


该 应 用 的 MySQL 服 务 还 没有 初始 化 





图 7-16 ”初始 化 数据 库 


建立 数据 库 后 建立 user 表 ， 字 段 为 id、user (用 户 名 ) 、passoword (密码 ) 、nick (上 昵称) ， 如 图 7-17 所 示 。 


存储 3 引擎 : 品 





图 7-17 uset 表 字段 


服务 器 端 两 个 页 面 ， 注 册页 面 为 reg.php， 从 客户 服 获取 user，pwd 和 nick， 对 密码 采用 Md5 加 密 ， 进 行 sq 查询 ， 检 测 用 户 名 是 否 已 经 被 注册 ， 如 果 被 注册 ， 向 客户 端 返回 2; 没有 注册 ， 将 数据 插入 
数据 库 ， 向 客户 端 返 回 1。 代 码 使 用 了 SAE 的 内 置 类 Saemysql， 也 可 使 用 传统 的 sq| 查 询 语句 ， 代 码 如 下 所 示 。 





<?php 
$user=$ POST['user']; 
$spwd=md5 ($ POST['pwd']); 
$nick=$ POST['nick']; 
Smysal = new SaeMysal (); 
$sql = "SELECT * FROM ‘'user' where user="'{$user}'™"; 
$mysql->runSql ($sqgl); 
$no=$mysql->affectedRows (); 
if (Sno==0) { 
$sql="INSERT INTO 'user' ('id' ,'user','password', 'nick') 
VALUES (NULL , '{S$user}','{$pwd}',' {$nick}')"; 
SmysaqlL->runSdql ($sql); 
echo 1;// 用 户 注册 


















































} 
else { 
echo 2;// 用 户 已 存在 


} 
?> 


登录 页 面 为 login.php， 从 客户 端 获 取 的 用 户 名 、 密 码 在 数据 库 中 进行 查询 ， 如 果 不 匹 配 ， 返 回 1， 代 表 用 户 名 或 密码 错误 ;如 果 匹 配 ， 则 从 数据 库 中 读 取 用 户 昵 称 ， 返 回 用 户 昵称 ， 供 客户 端 下 一 步 操 


作 ， 代 码 如 下 。 


~ 





<?php 

$user=$ POST['user']; 
$pwd=md5 ($ POST['pwd']); 
Smysal = new SaeMysal () ， 














$sql = "SELECT * FROM 'user' where user='{S$user}' AND password= 
1 {S$pwd} rm; 
$mysql->runSql ($sql); 




















$no=$mysql->affectedRows (); 
if ($no==0){ 


echo 1;// 用 户 或 密码 错误 








} 
else { 
$data=$mysql->getData ($sgl); 
snick=$datal[0] ['nick"']; 

echo S$nick; 





2. 手 机 端 模 块 
(1) 登录 模块 


登录 模块 首先 验证 用 户 名 、 密 码 是 否 不 为 空 ， 如 果 为 空 ， 显 示 提 示 消 息 ， 不 为 空 ， 设 置 服务 器 Url， 设 置 RequestHeader 的 Content-Type 为 application/Xx-www-form-urlencoded。Post 的 内 容 为 
user 和 pwd 对 应 的 list， 如 图 7-18 所 示 。 


上 ET 十 


Pot ce 





图 7-18 ”登录 模块 


’ 


服务 器 响应 信息 后 ， 对 返回 内 容 进 行 判 断 ， 如 果 返 回 1 则 提示 用 户 或 密码 错误 ， 不 为 1， 则 提示 登录 成 功 ， 同 时 关闭 Screen1， 跳 转 到 Screen2， 跳 转 时 传送 获取 的 用 户 昵 称 ， 如 图 7-19 所 示 。 


n vith start value scrEenlane 


= 





图 7-19 ”处 理 登 录 服务 器 响应 


(2) 辅助 模块 


辅助 模块 包括 新 用 户 注册 的 布局 切换 ， 以 及 关闭 屏幕 ， 如 图 7-20 所 示 。 


WILEII 





图 7-20 ”辅助 模块 
(3) 注册 模块 
注册 模块 与 登录 模块 类 似 ， 如 图 7-21 和 图 7-22 所 示 ， 增 加 了 了 昵称 不 能 为 空 。 
(4) 跳 转 页 面 


跳 转 页 面 时 附带 了 用 户 的 昵称 ，screen2 程 序 初始 化 时 将 标题 栏 设 置 为 昵称 + “欢迎 你 ”， 如 图 7-23 所 示 。 
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图 7-21 ”注册 模块 
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图 7-22” ”处理 注册 服务 器 响应 














图 7-23” 跳 转 页 面 





完善 注册 条 件 限制 ， 如 字符 长 度 、 两 次 密码 一 样 等 。 


上 传 和 下 载 也 是 Web 数 据 交互 的 常用 方法 ， 本 节 通 过 一 个 学 习 普 通话 的 程序 来 介绍 上 传 下 载 的 方法 。 





. SoundRecotdet 组 件 的 使 用 。 
.Web 组 件 下 载 文件 。 


:Web 组 件 上 传 文件 。 


学 习 普 通话 App 界 面 如 图 7-24 所 示 ， 实 现 功能 如 下 : 

. 首次 单 击 “ 播 放样 章 ” 按 钮 ， 从 服务 器 端 下 载 mp3 到 本 地 进行 播放 ， 以 后 使 用 可 直接 从 本 地 播放 。 
. 用 户 可 自行 录音 ， 然 后 将 录音 上 传 至 服务 器 。 

. 用 户 可 听取 服务 器 上 最 新 的 3 条 录音 上 传 文件 。 


“ 播放 器 控制 。 








上 游 的 一 种 树 ， 笔 直 的 干 ,笔直 的 

炉 。 它 的 干 呢 ， 通 常 是 丈 把 高 ， 像 是 加 以 人 工人 
的 ， 一 丈 以 内 ， 绝 无 碗 枝 ; 它 所 有 的 极 枝 呢 ， 一 
冬 向 上 ， 而 且 暑 紧 主 拢 ， 也 虱 是 加 以 人 工 仅 

的 ， 成 为 一 束 ， 绝 无 模 计 选 出 ; 它 的 宽大 的 叶子 
也 是 片 片 向 上 ， 几 乎 没有 半生 的 ， 更 不 用 说 倒 彼 
了 ; 它 的 皮 ， 光 滑 而 有 和 银色 的 泽 贺 ,微微 泛 出 
青色 。 这 是 员 在 北方 的 风 雪 的 压迫 下 却 保持 兰 伍 
强 提 立 的 一 种 树 ! 哪怕 只 有 磺 来 相 骨 罢 ， 它 却 穷 
力 向 上 发 展 ， 高 到 艾 许 ,两 艾 ， 参 天 闪 立 ， 不 折 
不 捕 ， 对 抗 着 西北 风 。 这 就 是 白杨 树 ， 西 北极 普 


24 学 习 普 通话 App 实 例 界面 











Gu 设计 


新 建 项 目 putonghua， 第 一 行为 功能 按钮 ， 包 括 播 放 、 和 暂停 、 停 止 ， 第 二 行为 播放 样 章 和 音量 调整 ， 第 三 行为 录音 及 上 传 ， 第 四 行为 听取 最 新 的 3 条 录音 ， 下 方 为 Label 显 示 普 通话 朗读 文本 。 朗 读 样 章 
为 01 ， 非 可 视 组 件 包括 3 个 Web 组 件 、 er 组 件 、SoundRecorder 组 件 、T 组 件 ， 如 图 7-25 所 示 ， 表 7-4 为 相关 组 件 说 明 。 





停止 录 吾 


者 在 六 和 革 上 洲 的 一 种 笠 ， 羞 自 的 干 ， 笔 坪 的 术 ， 和 的 干 呢 ， 
胃 钊 三次 把 局 ， 像 古 加 岂 洲 工 从 航 ;一 不 忆 内 ; 闻 无 千村; 
尼 所 有 的 检 桔 昵 ,一律 向上， 而 且 果 委 靠 乱 ， 世 像 且 加 由 
工 代用， 成 凡 一 束 ， 结 亢 展 笠 过 出 ; 尼 有 这 二 的 叶 了 于 也 是 片 
片 癌 上 ， 几 平流 有 幸 生 和 的: 电 不 用 说 闻 奏 了 ; 它 的 席 ， 江 演 
向 吾 银 冯 的 芋 圈 ,之 微 深 出 浴 吾 色 。 这 是 哩 社 北方 的 成 雪 的 
三 得 下 0 侠 持 看 侈 坚 注 要 的 一 种 构 * 喇 了 ' 白 心 有 有 琅 E 扯 骨 怪 ， 
七 却 藻 力 同 上 站 展 ， 高 着 玉 Tt 于 ， 则 村 ， 区 太 管 下 4， 个 折合 
措 ， 对 扩 著 本 北 风 ， 这 束 是 日 杨 桂 ,， 西 提 概 普 甫 的 一 种 

桂 ， 浴 而 刚直 是 平 必 的 于” 避 没 有 辕 沼 的 寥 态 ， 设 有 导 曲 
盘 诈 HE 由 村 ,也 旦 标 雪 如 它 - 沾 滞 朋 ,一 一 如 未 美 卉 专 扎 “六 
妆 ” 或 “ 模 笠 遂 出 ”之 匡 耐 言 ， 帮 人 色 ， 白 槐 树 划 直行 档 中 生 
籽 豆 子 ; 但 十 七 却 十 珊 片 ， 正 百 ， 补 让 ,严肃 , 也 趟 性 过 兽 
和 ， 虹 小 用 控 尼 朋 坚 涅 涉 导 与 手 控 ， 它 示 树 中 的 伟 水 夫 + 当 
你 在 各 轨 初 融 的 高 原 上 走 过 ， 看 见 平坦 的 大 地 上 六 城 挺 焉 六 
各 一 禁 或 一 所 日 棉 衬 ， 蕉 站 杯 赎 忆 他 得 衬 只 古 树 ， 难 首 邯 矶 
十 想 漳 车 的 相让 ， 丘 卉 ， 是 呈 直 所 。 至 少 也 要 证 了 北方 的 农 
民 : 难 置 你 竟 一 总 儿 也 二 联想 到 ,， 玫 前 后 的 三 术士 六 地 上 ， 
到 站 有 坚 叭 不 刁 ， 胡 各 信和 白 起 树 一 样 剖 天 纤 这 记 FT 卫 地 们 宗 


Non-vistble components 


图 7-25 学习 普通 话 UI 设计 


表 7-4 学 习 普 通话 组 件 说 明 
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引 作 | 所 局 工具 和 中 太公 


Horizontal Horizontal > | | 
Layout 水 平 布 局 Width: Fl parent 
Airangement AIrangement4 











Text: 播放 
Width: F1ll parent 
Text: 芹 仿 
Width: Fill parent 
Text: 候 止 
Width: Fl parent 


Button User Interface | Play 播放 
Button User Interface | Pause 


Button User Interiace | Stop 


Horizontal Horizontal es | | 

Layout | 水 平 布 局 Width: Fill parent 
Arransement Arraneementl 
Text: 播放 样 章 
Width: Fl parent 
Maxvalue: 100 
Minvalue: 0 
ThumbPosition: $0 


Width: Fl parent 


Button User Interface | Play Demo 播放 样 草 


Slider User Interface | Sliderl 改变 音量 


Horizontal Horlizontal > | | 
Layout 水 平 布 局 Width: Fill parent 
Arransement Afrrangement3 


Text: 开 过 录 将 


Button User Interface | Bein Rec 开始 录音 | 
> Width: FI parent 





(经 ) 


组 件 U1 属性 
= Text: 暂 休 录音 
Width: Fill parent 
Text: 上 传 录 首 
"dth: Fill parent 


全 下 


= ~ 


[本 


Button User Interface | Stop Rec 有 停 录 首 










Button User Interface | Upload Rec 


Horizontal Horizontal 


Layout Width: Fill parent 





Arrangement Airangement2 


Button User Intertace 


Button User Interftace 


Button User Interftace 


Text: 上 听 别 人 
Text: 1 孔 
Visable: Hidden 
Text: 2 号 
Visable: Hidden 
Text: 3 蕊 

Visable: Hidden 
Text : 那 是 力争 上 话 


Button User Intertace 





Label User Intertace | Labell 机 

的 一 种 鱼 …”* 
Web Connectivity ”| Web Download | 下载 样 草 其 认 
Web Web Upload 默认 


Player Playerl 声音 播放 硕 贡 庆 
TinyDB TinyDB]1 


你 存 件 草 路 径 
SoundRecorder SoundRecorderl 


人 @ 模 块 编辑 


1. 服 务 器 端 


上 传 下 载 使 用 到 SAE 的 Storage 服 务 ，Storage 需 要 初始 化 ， 如 图 7-26 所 示 。 


appliz™ 修 浆 应用 基本 情 息 
Web 这 用 


Storage 


Storage 定 SAE 为 开山 者 近 供 的 分 布 陈 立 件 但 情 服 务 ， 用 来 存 帮 用 户 的 持 尖 化 存 傅 


domain 管 理 Storagqe 防 水 墙 


新 建 domain 服务 自述 
包罗 一 个 新 的 Storage 存 赃 domain 快速 检 音 服务 是 否 可 用 





图 7-26 ”初始 化 Storage 


新 建 domain 目 录 image， 将 样 章 录音 01.mp3 上 传 至 image 目 录 ， 如 图 7-27 所 示 。 


己 用 : 1.04 MBIiTOG 9torage 志 容 
下 类 型 。 上传 日 期 大 小 人 


i 01.mp3 5014/09/06 21:27:489 1.03 MB 


号 | 14100118610.3gp 1d Do 2156:00 4 bi kb 


| 1410011951.3gp 号 | 1d/DWUe 21.59,11 J.06b Kb 


区 | 1410012047.3gp 号 20140806 22.00.47 4.26 KB 





图 7-27 上 传 文件 至 Storage 


在 SAE 的 代码 中 新 建 up.php， 作 为 服务 器 处 理 上 传 文件 ，SAE 中 上 传 文件 也 要 保存 在 刚才 新 建 的 storage 中 ， 使 用 SAE 的 内 置 Storage 类 write 方法 ， 可 以 直接 处 理 上 传 文件 ， 使 用 time 函 数 作为 文件 
名 ，Al2 的 SoundRecorder 组 件 录音 的 格式 为 ?gp， 因 此 文件 后 缀 设置 为 3gp， 保 存在 image 目 录 下 ， 代 码 如 下 : 


<?php 

$poststr = file get contents('php://input'); 
$s = new SaeStorage () ; 

Sname=time () .".3gp"; 

$s->write( 'image' , $name, SpostSstr) ， 

?> 











另外 建立 down.php， 用 来 获取 3 个 最 新 上 传 的 文件 名 ， 使 用 Storage 的 getList 方 法 可 以 获取 目录 下 的 文件 名 ， 由 于 最 新 的 文件 在 最 后 ， 进 行 数组 的 处 理 后 输出 最 新 3 个 文件 名 ， 代 码 如 下 : 





<?php 
$stor = new SaeStorage (); 


$ret = $stor->getList ("image"); 
Sno=count ($ret); 

$al=$ret [$no-1]; 

$a2=S$ret [$no-2]; 

$a3=$ret [$no-3]; 

echo json encode (array ($al, $a2, $a3)); 
?> 


2. 手 机 客户 端 

(1) 定义 全 局 变量 

定义 全 局 变量 uri， 文 本 类 型 ， 初 始 值 为 空 ， 保 存 录音 的 路 径 。 全 局 变量 a1、a2、a3 分 别 对 应 服务 器 端 最 新 的 3 个 文件 名 。 如 图 7-28 所 示 。 
(2) 声音 控制 模块 


播放 、 和 暂停、 停止 及 音量 调整 等 功能 在 前 面 介 绍 过 ， 这 里 不 再 蓝 述 ， 如 图 7-29 所 示 。 




















图 7-28 ”全 局 变量 


when 


. FoslitlionLhangsed 





图 7-29 声音 控制 模块 
(3) 样 章 下 载 播放 
首次 进行 样 章 播放 时 ， 通 过 TinyDB 判 断 是 否 下 载 过 ， 下 载 过 的 直接 从 手机 播放 ,没有 下 载 的 从 服务 器 进行 下 载 ， 文 件 名 保存 为 01.mp3， 如 图 7-30 所 示 。 


宇 hh SE jl 





‘appi2-inage. stor. sinaapp. Com 





图 7-30” 样 章 下 载 


样 章 下 载 后 从 手机 开始 播放 ， 并 且 更 新 TinyDB， 如 图 7-31 所 示 。 


.COtk1 


.torevalue 


valueTostore 


tart 





图 7-31 样 章 播 放 
(4) 录音 及 上 传 模块 


录音 完成 将 录音 保存 的 路 径 赋值 给 全 局 变量 Uri， 单 击 上 传 后 将 录音 文件 上 传 至 服务 器 ， 见 图 7-32。 








图 7-32 ”录音 及 上 传 模块 


(5) 获取 及 播放 最 新 录音 模块 


此 模块 实现 获取 最 新 上 传 的 3 个 录音 文件 名 ， 服 务 器 端 已 经 设置 好 ， 直 接 进行 读 取 ， 同 时 显示 3 个 按钮 ， 如 图 7-33 所 示 。 
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图 7-33 ”获取 最 新 录音 模块 


播放 最 新 录音 没有 使 用 文件 下 载 ， 而 是 进行 在 线 播放 。Storage 的 路 径 一 致 ， 只 要 获取 到 文件 名 ， 即 可 进行 播放 ， 见 图 7-34。 










aDni2-inage,. stor. sinaapp, com! 





ADDI2- inase, stor, SinNnaapp, on 


apni2-inase. stor. slnaapp. conr 


-| 
一 1 | 
| 也 用 


图 7-34 ”播放 最 新 录音 模块 
图 任务 小 结 


本 节 通 过 普通 话 样 章 下 载 和 录音 上 传 的 程序 介绍 了 手机 客户 端 如 何 与 服务 器 端 进行 文件 的 上 传 和 下 载 。 利 用 这 个 功能 可 以 将 一 些 大 的 素材 上 传 至 网 络 ， 需 要 时 再 下 载 ， 减 少 APK 的 大 小 。 


增加 WebViewer 的 互动 上 传 下 载 。 


7.5 ”聊天 宇 


全 难度 六 六 六 


伴随 着 互联 网 的 诞生 ， 聊 天 室 也 随 之 出 现 ， 随 着 网 络 宽带 的 增加 ， 聊 天 室 也 从 文字 转向 语音 、 视 频 。 本 节 我 们 将 来 学 习 制作 移动 端的 聊天 室 程序 。 





全 学习 目标 
“ 聊天 室 原理 。 
.Web 组件 与 数据 库 交 互 。 
曲 人 殉 措 述 
聊天 室 App 界 面 如 图 7-35 所 示 ， 实 现 功能 如 下 : 
. 用 户 进 入 程序 后 自动 分 配 昵称 ， 昵 称 可 更 改 。 
: 进入 聊天 室 后 系统 发 送 XX 进 入 聊天 室 。 
. 用 户 可 发 送 文字 进行 聊天 。 
. 聊天 室 屏 幕 每 5 秒 更 新 一 次 ， 显 示 最 近 10 条 聊天 记录 。 


“ 退出 后 系统 发 送 XX 退 出 聊天 室 。 


会 欧 省 | 因 16:04 因 60 


孚 天 至 


进入 "| 授 出 陀 称 user715 
w | 


UsSerrdd ' BE 

uscr715 ; 我 下 了 

User739 ,不 错 [ 回 

user715 ' 所 好 玩 的 

User739 ; 这 是 手机 端 

user715 ' 你 好 

系统 管理 员 : user739j 进 入 聊天 室 
系统 管理 员 : user715j 进 入 聊天 至 
系统 着 理 员 : 玉 二 退出 锌 天 对 
张 三 : 你 好 





图 7-35 ”聊天 室 App 界 面 
人 ui 设计 


新 建 项 目 chatroom，UI 第 一 行为 进入 、 退 出 聊天 室 及 昵称 显示 ， 第 二 行 用 户 发 送 聊 天 内 容 ， 第 三 行 聊天 室 主屏 ， 显 示 10 条 最 新 的 聊天 记录 ， 包 含 用 户 昵称 和 内 容 ， 如 图 7-36 所 示 ， 表 7-5 为 相关 组 件 说 
明 。 
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图 7-36 ”聊天 室 UI 设 计 
表 7-5 聊天 室 组 件 说 明 


组 件 。 | 所 属 工具 组 U1 属性 
seee | 一 |sSaenl | 一 |Tide: 聊天 室 


Horizontal Horizontal ee ee 
水 平 A 局 中 TI 


Arrangement I Arrangement1l 

Button 进入 聊天 至 Text: 进入 
Button Quit 一 聊天 室 Text: 退出 
Label User Interface Text: 上 昵称 
TextBox User Interface 陀 二 示 及 修改 天 


Horizontal Horizontal i ee 
水 平 布局 默认 


Layout 

Arrangement Airangement2 

Label User Interface 肢 天 Text， 有 聊天 
0 Hint: 

发 送 聊 天 的 内 容 | 

Width: 220 


Button 发 送 聊 天 和 内容 Text: 友 达 

Label 聊天 室 主 屏 Text: 

TimeEnabled: 不 这 
Timelnterval: $000 
Web 发 送 聊 天 内 容 默认 

Web WebGet 获取 聊 天 内 和 雁 只 人 夫 











TextBox User Intertace TextBox2 





Clock Sensors Clock!l 每 5 秒 刷 新 聊天 内 容 











全 基础 知识 
聊天 室 原 理 


聊天 室 有 很 多 种 实现 方式 ， 这 里 程序 使 用 的 是 传统 的 数据 库 模 式 。 即 客户 端 发 送 的 聊天 内 容 按 照 时 间 顺 序 插 入 服务 器 端的 数据 库 中 ， 实 现 上 传 。 每 5 秒 钟 客户 端 再 从 服务 器 端的 数据 库 中 获取 最 新 的 聊天 
记录 ， 这 里 设 定 为 10 条 。 这 样 的 方法 的 缺点 是 即使 服务 器 的 数据 库 没 有 更 新 ， 客 户 端 仍然 会 请 求 ， 浪 费 资源 。 目 前 已 有 新 技术 实现 服务 器 端 有 更 新 数据 再 推送 给 客户 端 ， 如 ajax、 长 轮 询 (long polling) 
等 ， 有 兴趣 的 读者 可 以 查阅 相关 内 容 。 本 书 软件 仍然 使 用 传统 方式 ， 服 务 器 端 有 两 个 文件 ， 一 个 处 理 上 传 的 聊天 内 容 ， 一 个 处 理 下 载 最 新 的 聊天 记录 。 


代 模 决 编辑 
1. 服 务 器 端 


数据 库 中 新 建 表 chat， 字 段 为 jd、nick、content， 数 据 类 型 为 VARCHAR， 长 度 255， 如 图 7-37 所 示 。 


nick | content 


waRCHAR or YARCHAR ~| 


口 


| PRIMARY 国 | 


TO THCRENENT 


存 届 引 擎 : 回 
MYISAM 





图 7-37 ”新建 表 chat 


在 SAE 的 代码 中 新 建 chatup.phPp， 作 为 服务 器 处 理 聊天 上 传 的 文件 ， 将 客户 端 传 来 的 昵称 和 聊天 内 容 插入 数据 库 中 ， 代 码 如 下 。 





<?php 

$nick=$ POST['nick']; 

$content=$ POST['content']; 

if (!empty(Snick) and !empty(Scontent) ) { 

Smysal = new SaeMysal () ， 

$sql="INSERT INTO 'chat' ('id' , 'nick','content') VALUES (NULL ， 
'{Snick}','{S$content}')"; 

SmysaqlL->runSdql ($sql); 

} 





























?> 


另外 建立 chatdown.php， 用 来 获取 10 条 最 新 的 聊天 记录 ， 注 意 按 照 id 逆序 排列 ， 返 回 JSJON 格 式 。 代 码 如 下 。 



































<?php 
Smysal = new SaeMysal (); 
$sql = "SELECT * FROM ‘chat ORDER BY ‘id DESC LIMIT 0 , 10"™; 


$data=$mysql->getData ($sqgl); 
echo json encode ($data); 
?> 


2. 手 机 客户 端 
(1) 程序 初始 化 


程序 运行 后 ， 将 用 户 了 昵称 随机 分 配 为 userXX， 避 免 用 户 名 重复 ， 如 图 7-38 所 示 。 


whern ,Initialize 





random jnteeer fron 


图 7-38 ”程序 初始 化 
(2) 发 送 消息 模块 


将 发 送 消息 模块 封装 为 Send 程序， 参数 为 nick 和 content， 表 示 了 昵称 和 发 送 内 容 ， 如 图 7-39 所 示 。 





a SErIO 7 和 昌 肝 yan 
text = HebSencd = Baikv la is 


list 





图 7-39 发 送 消息 模块 


(3) 进入 及 退出 聊天 室 


进入 聊天 室 时 ， 设 置 服务 器 地 址 ， 激 活 时 钟 组 件 ， 同 时 发 送 系 统管 理 员 XX 进 入 聊天 室 ， 如 图 7-40 所 示 。 退 出 聊天 室 时 ， 发 送 系统 管理 员 XX 退 出 聊天 室 ， 时 钟 失 活 ， 服 务 器 地 址 清空 。 如 图 7-41 所 示 。 
(4) 发 送 聊天 
发 送 聊 天 内 容 ， 调 用 Send 方 法 ， 每 次 发 送 完 将 TextBox2 清 空 并 隐藏 输入 键盘 ， 见 图 7-42。 


(5) 获取 聊天 记录 
时 钟 组 件 激活 后 ， 每 5 秒 从 服务 器 获取 最 新 聊天 信息 。 对 聊天 记录 JSON 解 析 后 通过 for each 循 环 ， 解 析 昵 称 和 聊天 内 容 ， 赋 值 给 局 部 变量 name 和 Label3。 


ont ent 





图 7-40 进入 聊天 室 





图 7-41 退出 聊天 室 


. HideKevbhoard 




















图 7-42 发送 聊天 








te | j， ane 
lookup in Dalrs kew 
Palrs 
otH ourid 
| | ED 四 
| 


lami irn PDairs Ke 














Dalirs 


notH ond 


图 7-43 ”获取 聊天 记录 


本 节 通 过 简易 聊天 室 学 习 聊 天 室 原理 ， 进 一 步 了 解 A 与 数据 库 的 交互 。 
个 自我 详 践 


建立 两 个 聊天 室 ， 用 户 可 选择 进入 不 同 聊天 室 。 


附录 A App Inventor 2 组 件 


A.1 Screen 组 件 


单 击 返 回 键 触发 事件 


报错 信息 处 理 


屏幕 初始 化 事件 


其 他 屏幕 关闭 事件 


屏幕 方 回 变化 事件 


屏幕 介绍 ， 单 击 功 能 键 后 About Screen 


介绍 


屏幕 水 平 对 齐 方式 ， 接 数字 1、2、3 对 
应 左 对 齐 、 居 中 、 右 对 齐 


屏幕 垂直 对 齐 方式 ， 接 数字 1、2、3 对 
应 上 对 齐 、 居 中 、 下 对 齐 








A.2 User Interface 组 件 


1.Button 组 件 








屏幕 高 度 


开 屏 动画 


屏幕 方向 


屏幕 是 否 可 滚动 


屏幕 状态 栏 标题 


屏 侨 毁 度 
屏 间 组件 


按钮 单 击 事件 


按钮 长 按 事件 


按钮 聚焦 事件 (只 有 在 有 十 字 方 向 键 的 手 
机 才 有 用 ) 


按钮 失 焦 事件 


按钮 按 下 事件 


按钮 按 起 事件 


按钮 激活 


按钮 字体 加 粗 





按钮 字体 斜体 


按钮 字体 大 小 


按钮 高 度 


按钮 上 有 大 图 


按钮 视 攻 效 未 (在 按钮 有 至 信 图 时 有 效 ) 


按钮 文字 


按钮 可 见 


按钮 帝 度 





按钮 组 件 


2.CheckBox 组 件 


功 能 
复 选 框 改 变 事 件 


复 选 框 聚 焦 事 件 (只 有 在 有 十 子 方 同 键 的 
手机 才 有 用 ) 


复 选 枉 失 焦 事件 


复 选 性 是 否 油 话 


复 选 框 字体 大 小 





3.DatePicker 组 件 


日 期 提取 后 触发 事件 


日 期 提取 聚焦 事件 (只 有 在 有 十 字 方 回 键 
的 手机 才 有 用 ) 





功 能 
日 期 提取 失 焦 事件 


chkerl ™ Bue barb 


日 期 提取 按 下 事件 


| 已 | ] 加 T "uchUn 


日 期 提取 按 起 事件 


呼叫 日 期 提取 方法 


2 


BT] 7 - 与 巴 七 口 直 二 TeDiSDay 
指定 年 月 日 呼叫 日 期 提取 方法 ， 可 配合 日 
期 提取 按 下 事件 使 用 


日 期 提取 到 晤 颜色 
日 期 提取 的 天 


日 期 担 取 是 否 油 活 





日 期 提取 字体 加 粗 


日 期 提取 字体 倾 任 


日 期 提取 字体 大 小 


日 期 提取 组 件 珊 度 


日 期 提取 吾 及 图 像 


日 期 提取 视 放 效果 (在 日 期 提取 有 背景 图 
时 有 效 ) 

日 期 提取 月 份 ， 如 返回 8 

日 期 担 取 月 份 市 月 字 ， 如 返回 8 月 


日 期 提取 文字 


日 期 提取 文字 颜色 


日 期 提取 组 件 是 否 可 网 


日 期 提取 组 件 宽度 


日 期 提取 组 件 提取 年 
日 期 提取 组 件 





4.Image 组 件 


模 块 功 能 

图 片 移动 ， 后 接 ScrollRisghtSlow 、ScrollRieht、 
ScrollRightFast， 对 刁 图 片 石 慢 移 、 右 中 速 移 
动 、 石 快速 移动 





图 片 高 度 


图 片 是 否 可 见 





图 片 组 件 


5.Label 组 件 


[EY 


功 


Hk 


次 下 


标签 至 和 颜色 


标签 字体 大 小 


标签 高 度 


标签 文字 


标签 文字 颜色 


怀 签 区 是 合唱 可 见 





慰 签 组 件 


6.ListPicker 组 件 


When ListPi ckerl ™ .fteTPiIckinE 


列表 提取 后 触发 事件 


列表 提取 前 甬 发 事件 


列表 提取 聚焦 事件 (只 有 在 有 十 字 方 同 键 的 
手机 才 有 用 ) 


列表 提取 失 焦 事件 


列表 提取 按 下 事件 


列表 提取 按 起 事件 
呼叫 打开 列表 方法 


列表 背景 颜色 


从 list 中 提取 列表 元 亲 ， 后 接 list 型 变量 








a text Lt 中 提取 列表 元 素 ， 
， 隔 开 


后 接 text 型 变量 ， 


列表 是 合 油 [ 话 
列表 字体 加 粗 
列表 字体 斜体 


列表 字体 大 小 


列表 局 度 


列表 选取 的 元 系 索 引 


功 能 


列表 视觉 效 未 〈 在 列表 有 青 旦 图 时 有 效 ) 


列表 搜索 框 


列表 文子 


列表 文子 颜色 


列表 选择 乔 面 状态 芒 标 题 


列表 是 否 可 昂 


列表 更 度 





列表 组 件 


7.ListView 组 件 


功 


il 
[LYE 


列表 显示 选择 后 触发 事件 


从 list 中 提取 列表 显示 元 素 ， 后 接 list 型 变量 





Caan | ， 人 text 中 失 取 列表 品 示 元 来 ,后 楼 text 型 变 


量 ， 元 系 以 “,” 隐 开 


列表 显示 局 度 

列表 显示 选择 元 系 
列表 显示 选择 元 系 宗 引 
列表 显示 搜索 框 

列表 显示 是 耕 可 见 


列表 显示 宽度 








列表 显示 组 件 


8.Notifier 组 件 


通知 选择 后 触发 事件 


通知 输入 文本 后 触发 事件 


呼叫 记录 错误 日 志方 法 


呼叫 记录 日 志 信 息 方法 


.LoaWarnine 


呼叫 记录 警告 日 志方 法 


message | 


| .showhlert 


呼叫 显示 临时 警告 信息 


notice | 


本 ChowvwhsoseDialte 
titLe TT | a or. 


butionalert 


Hotifierl ™ Wyte [At 


呼叫 弹出 确认 请 县 对 话 框 


buttonText 


Notifieri = Waid sbib 作 本- 
Te Ce No 
呼叫 弹出 输入 文本 消 县 对 话 框 


t+1itle 


tancelable 
通知 组 件 痛 景 颜色 
通知 组 件 文字 颜色 





通知 组 件 


9.PasswordTextBox 组 件 





10.Slider 组 件 





功 
密码 文本 框 聚焦 事件 


密码 文本 框 失 焦 事 件 


密码 文本 框 背景 颜色 


功 


密码 文本 框 是 否 激活 


密码 文本 框 字体 大 小 


密码 文本 框 蜗 度 


密码 文本 框 输入 提示 


密码 文本 框 文 字 


密码 文本 框 文字 颜色 


密码 文本 框 是 否 可 见 


密码 文本 框 宽度 


密码 文本 框 


ely 


-0 


[WEY 


[YT 


11.Spinner 组 件 


Sliderl 下 Barbi ely.latfin| 





功 


滑 块 位 置 改 变 触 发 事件 


滑 块 左 侧 颜色 


消 块 石 侧 颜 色 


滑 块 最 大 值 


滑 块 最 小 但 


消 块 位 置 


消 块 是 否 可 见 


滑 块 组 件 


上 


[YY 


功 能 
下 拉 框 选择 后 触发 事件 
呼叫 下 拉 框 显示 


从 list 中 提取 下 拉 框 元 素 ， 后 接 list 型 


“EH 
变量 


从 text 中 提取 下 拉 框 元 素 ， 后 接 text 型 


下 拉 框 选择 栏 上 方 提 示 消 县 


下 拉 框 选中 元 素 索引 


下 拉 框 是 否 可 见 





下 拉 框 


12.TextBox 组 件 


13.TimePicker 组 件 





文本 框 聚焦 事件 


文本 框 失 焦 事 件 


呼叫 隐藏 键盘 方法 


文本 框 有 有 泵 颜色 


文本 框 是 否 油 活 


文本 框 字体 大 小 


文本 框 高 度 


功 


hls 
[YY 


文本 框 提 示 放 县 


文本 框 是 否 多 行 显 示 


文本 框 只 允许 输入 数 子 


文本 框 文字 


文本 框 文子 颜色 


文本 框 是 否 可 见 
文本 伍 砚 度 


文本 框 组 件 


功 能 
时 间 提 取 后 触发 事件 
时 间 提 取 聚 焦 事 件 
时 间 握 取 失 焦 事件 
. TouchDown 


时 间 提 取 按 下 事件 


时 间 提 取 按 起 事件 


呼叫 时 间 提 有 取 方 法 


- SEtTineToDi splay 


hour 首 定 时 间 显 示 ， 配 合 按 下 事件 使 用 


ninute 
时 间 提 取 背 景 闫 色 


时 间 提 有 取 是 耕 没 活 








14.WebViewer 组 件 





时 间 提 取 宇 体 加 粗 


时 间 提 取 字 体 短 体 


时 间 提 取 字 体 大 小 


时 间 提 取 高 度 


时 间 提 肥 的 小 时 


时 间 提 有 取 图 片 


时 间 担 取 的 分 钟 


时 间 捉 取 视 禹 歼 示 《在 青 术 图 时 有 效 ) 


时 间 提 有 取 文 学 


时 间 握 取 文 字 颜 色 


时 间 担 取 是 否 可 见 


时 间 提 取 砚 度 


时 间 提 上 肥 组 件 


模 块 功 能 


call .Carb oBack 浏 顺 大 是 否 可 后 退 
有 有 WebViewerl ™ Ml Ho Eh 济 刘 监 iA 1 焉 是 是 否 可 前 前 进 
call .ClearLocations 清 降 浏 贤 间 地 理 位 置 

call ,GoBack 省 入 阁 后 退 
.GoForvward 训 | Lr 全 上 月 进 

call .CoHome 训 | LA 和 访 占 士 页 

call , GoToUr] 
| ur 记号 太 速生 到 指定 url 
( 续 ) 
功 能 


当前 网 页 标题 


| 一 


> 有 url 


是 否 跟 足 链接 (是 否 可 后 退 前 进 


浏览 从 局 度 


鹿 叶 礁 主 页 


浏览 大 访问 地 理 位 置 是 否 给 出 担 示 


浏览 器 字符 串 〈 与 JS 交互 ) 


pd 


浏 贤 融 是 否 可 见 





浏览 锅 组 件 





A.3 Layout 组 件 


1.HorizontalArrangement 组 件 





2.TableArrangement 组 件 





3.VerticalArrangement 组 件 


功 能 


水 平 布局 组 件 水 平 对 齐 方式 


水 平 布局 组 件 垂直 对 齐 方式 


水 平 布 局 组 件 高 度 


水 平 布 局 组 件 是 否 可 见 


水 平 布局 组 件 宽 度 


水 平 布 局 组 件 


< 
CIY 


功 
表格 布局 组 件 高 度 
表格 布局 组 件 是 否 同 见 


表格 布局 组 件 砚 度 
表格 布局 组 件 





A.4 Media 组 件 


1.Camcorder 组 件 


el=r Ml TETL 了 生计 





call .RecordYideo 





2.Camera 组 件 


模 块 
when .AfterPicture 


call . TakePicture 


3.ImagepPicker 组 件 





功 能 
垂直 布局 组 件 水 平 对 齐 方式 


垂 二 布局 组 件 垂 十 对齐 方式 


垂直 布局 组 件 高 度 


垂 二 布局 组 件 是 否 可 见 


垂直 布局 组 件 宽度 


垂 生 布局 组 件 


功 


TD 
CE 


录像 机 完成 后 事件 


呼叫 录像 机 方法 


录像 机 组 件 


功 能 


照相 机 完成 后 事件 


功 
呼叫 照相 机 方法 


ly 
[TEY 


是 否 使 用 前 置 摄像 头 


照相 机 组 件 


头 


相册 选取 后 事件 


相册 选取 击 事 件 


相册 聚焦 事件 


LostFocus 


相册 失 焦 事件 


相册 控 下 事件 


相册 按 起 事件 


打开 相册 


相册 是 否 激活 


相册 字体 加 粗 


相册 字体 斜体 


相册 字体 大 小 


相册 图 片 


相册 视觉 效果 (在 相册 有 背景 图 时 有 效 ) 





4.Player 组 件 


5.Sound 组 件 





ET” Bhd 


call .Vibrate 


nilliseconds 





功 


Hk 
[a 


相册 文字 


相册 字体 颜色 


相册 和 是否 可 昂 


相册 砚 度 


相册 组 件 


功 


上 
CC 


播放 器 完成 后 事件 


其 他 播放 咒 开 始 事件 


播放 器 暂停 
播放 器 开始 
播放 器 结束 


播放 前 是 否 正 在 播放 


播放 谷牧 环 播 放 


播放 柯 仅 前台 播放 


播放 源 


播放 器 音量 
播放 器 组 件 








call .Play 


call . Resume 





call .Vibrate 


mi] 1 iseca 





6.SoundRecorder 组 件 


.Startedhecordine 


.Stoppedhecordine 


7.SpeechRecognizer 组 件 





声音 停止 


手机 震动 


声音 最 小 间隔 


声音 来 源 


百 音 组 件 


功 


功 


录 首 机 完成 后 事件 


录音 机 开始 录音 事件 


录音 机 停止 事件 
呼叫 开始 录音 
呼叫 结束 录音 
录音 机 组 件 


0 


[YE 


功 


uly 


语音 识别 后 事件 


. Beiorebettinelext 


语音 识别 前 事件 


呼叫 语音 识别 


三 冯 识别 结果 


语音 识别 组 件 





8.TextToSpeech 组 件 


[CTE 


功 


ly 


文本 转 语音 后 事件 


功 能 
文本 转 语音 前 事件 


将 指定 文本 转 为 语音 


设置 文本 转 语音 国家 


设置 TTS 朗读 音 高 ， 值 为 0 ~ 2 


文本 闭 胡 首 结 末 


文本 转 语音 组 件 





9.VideoPlayer 组 件 


影 原 机 持 放 完成 事件 


影碟 时 长 
影碟 机 和 暂 集 


| 


星 进 到 影 雁 指定 时 间 


oF deoPlayerl ™ Bt 时 代 机 开始 


影碟 机 全 屏 


影碟 机 高 度 
影 厅 播放 所 


影 原 机 是 否 可 见 


影 原 机 宽度 


影 剑 机 音量 


影 侏 机 组 件 





10.YandexTranslate 组 件 


功 能 


扬 基 策 详 完 后 事件 


.RequestTranslatlo 


lanauaaeTolTranslateTe 从 指 证 主 言 出 | | 学 开 || — 到 | 言 
terxtTolranslate 


扬 基 翻译 (该 组 件 需 联网 ， 不 支持 翻译 
中 文 ) 





A.5 Drawing and Animation 组 件 


1.Ball 组 件 


werm Balll 


.olllidedyi +h 


" le 


本 了- r : TochUp 








.LollidinavYith 





other 


球 碰 撞 事 件 


球 拖 扎 事件 


球 到 达 边 缘 事件 


球 挥动 事件 


球 不 再 碰撞 事件 


球 按 下 事件 


球 按 起 事件 


球 单 击 事件 


呼叫 球 反弹 方法 


呼叫 球 碰撞 方 法 


2.Canvas 组 件 


bs Balll ™ Br a eee bie 


Cal] Ealll ™ Bil 


点 


EE 





功 能 


球 出 界 后 将 球 移 到 界 内 


球 移动 到 指定 坐标 


球 深 问 指定 坐标 


球 深 癌 指定 目标 


球 是 耕 激 活 


球 深 动 亡 问 


球 显示 间隔 


球 颜 色 


球 半径 


球速 度 


球 是 个 可 网 


了 和 锥 标 


球 从 标 


球 Z 坐标 


球 组 件 


> 


$erl 


T hi a 


. n 





功 


画布 拖 遇 事件 


画布 挥动 事件 


画布 按 下 事件 


画布 按 起 事件 


画布 单 击 事件 


男 | 线 


了 


call ,DravText 


| 。 DrawTerthtaAngle 


text 


画布 上 以 倾 竹 角度 写字 


.GEtEackeroundPixelColor 


x 获取 当前 背景 点 颜色 


时 





call 有 VE 画布 保存 


call (CTT . Savehs m 
fileName | | 布 男 存 


. SBEtBackesroumdPixeltol or 


当前 坐标 涂 色 





3.ImageSprite 组 件 





设置 画布 字体 大 小 


加 布局 度 


Imagespritel * ote 





过 
下 


精灵 页 撞 事 件 


精灵 拖 搜 要 件 


精灵 挥动 事件 


精灵 不 再 碰撞 事件 


精灵 按 下 事件 


. TouchUp 


Wi ,Touched 


: Collidinedith 


other 


,NovelntoBounds 


lnageSpritel 7 Al 


ImagESpritel ~ Bhsndielbbib ys 
年 


VY 


" ee 


tarpeet 





功 能 


精灵 按 起 事件 


精灵 单 击 事件 


呼叫 精灵 反弹 方法 


呼叫 精灵 碰撞 方法 
精灵 出 界 后 将 球 移 到 界 内 


精灵 移动 到 指定 坐标 


精灵 滚 向 指定 坐标 


精灵 深 向 指定 目标 


精灵 是 否 激活 


A.6 Sensors 组 件 


1.AccelerometerSensor 组 件 





类 灵 滚 动 方 回 


精灵 高 度 


精灵 显示 间隔 


六 元 图 卢 


精 天 是 合 可 网 


精灵 壳 度 


精 录 站 坐标 


精灵 Z 坐标 


精灵 组 件 


2.BarcodeScanner 组 件 


3.Clock 组 件 


Ur celeroneterSensorl "™ U3- hh tA | 








CET 


功 


J 


加 速 传 感 需 变化 事件 


手机 播 动 事件 
加 速 传 感 硕 是 否 可 用 


加 速 传感器 是 否 激活 


加 速 传 感 器 感应 时 间 间 陋 


扫描 后 事件 


呼叫 扫描 
扫描 结果 
扫描 组 件 ( 需 安 装 zxing) 








Clockl - WDM 


instant 


davs 


\ CE 


instant 


hours 


a Cl ockl ™ Wiel ply 


instant 上 


入 生计 避 二 


cl 


instant i 


mornths 


FE lock]l 7 Bl 


instant 


名 色 人 EOF ds 


/ :lockl ™ Mls ees 


irystart 


可 已 ES | 


cr .Add7ears 


1instant 


VEALS 





功 能 
时 钟 运行 时 事件 


几 天 后 的 时 间 


几 小 时 后 的 时 间 


几 分 钟 后 的 时 间 


儿 月 后 的 时 间 


几 秒 后 的 时 间 


几 周 后 的 时 间 


几 年 后 的 时 间 


La | 


CE ™ Bibinbd en 


1mstant 


Clockl 了 Ung del 
Eat 


ETI 


sf cl 7 。 焉 总 工 看 三 上 二 二 三 


1 ns tant 


OCEl] ™ By 


instant 


call Win .GetNillis 


imstart 





CE 


lrnstant 


3 ol 7 ， 隐 二 二 忆 ISTaTT 


fron 


Clockl ”和 


millis 


时 


imstant 


和 CoC] 7 


imstant 





返回 日 ， 如 3 月 15 日 , 为 15 


时 间 间 陋 


返回 日 期 ， 如 2014-8-19 


返回 日 期 时 间 ， 如 2013-3-15 下 午 9:55:50 


返回 Unix 时 间 ， 从 1970 年 开始 计算 ， 单 位 
蜡 秒 


返回 小 时 

返回 指定 时 间 格 式 MM/DD/YYYY hh/mm/ss 
从 Unix 时 间 返 回 

返回 分 钟 


返回 月 ， 如 8 


模 块 


a Cl ockl ™ Wubi 


imatant 
afs C1 ocekl 了 到 本 高 证 
WE Clockl ™ Ws rls 


instant 


ockl] ™ .SYS 二 ETTiDE 


a ool "7 。 玫 已 已 左 口 刀 Y 


1rnstant 


CalL]1 Cock] ™ a 


1rnstant 


Fo Cockl] 7 W/Ers 


instant 


4.LocationSensor 组 件 





返回 月 份 ， 如 8 明 

当前 时 间 

返回 秘 

系统 时 间 ，Unix 时 间 

返回 星期 几 ， 从 星期 天 开始 计算 为 1 
退回 星期 儿 ， 如 返回 蛙 期 日 

返回 年 份 

时 钟 是 否 一 直 运 行 

时 种 是 否 激 活 

时 种 运行 间隔 


时 钟 组 件 


由 tanmgea 


位 置 传 感 吕 位置 变 化 事件 


WW .StatusChanged 


位 置 传 感 需 定位 源 变 化 事件 


Sor] "lt 


退回 位 置 纬 度 





locati cordane 


1 rl .LoneitudeFroniddress 


locati onlame 





功 能 
位 置 传感器 是 否 激活 


符 度 是 否 可 用 
噩 度 是 否 可 用 
经 纬度 是 否 可 用 


颌 定位 置 提 供 源 


位 置 提 供 源 名 称 (gps，network) 


位 置 传 感 融 时 间 间 隔 





位 置 传感器 


5.NearField 组 件 


wir earFEieldl 


. Tapgyritten 








6.OrientationSensor 组 件 


i rientatl enSensorl ™ Dn 


A.7 Social 组 件 


1.ContackPicker 组 件 





功 


了 
[ey 


近 场 通信 标签 读 取 后 事件 


近 场 通信 标签 写 人 后 事件 


最 后 谢 奶 


近 场 通信 写 类 型 
近 场 通信 写 入 文本 


近 场 通信 组 件 


功 


ly 
[YY 


方向 传感器 变化 事件 


方 回 传感器 角度 (与 Ball 的 head 对 应 ) 


方向 传感器 是 否 可 用 
方向 传感器 方位 值 

方向 传感器 是 否 激 活 
方向 传感器 倾斜 程度 
方向 传感器 横 摇 度 

方向 传感器 纵 摇 度 

方向 传感器 


when 


ContactPickerl * 


ContactPickerl ”~ 


,TTETPI cKins 


.LostFocus 





联系 人 选择 后 事件 


联系 人 选择 前 事件 


联系 人 聚焦 事件 


联系 人 失 焦 事件 


联系 人 按 下 事件 


联系 人 按 起 事件 


呼叫 联系 人 打开 方法 


联系 人 背景 
联系 人 姓名 
联系 人 邮箱 
联系 人 邮箱 列表 
联系 人 是 否 激活 


联系 人 字体 加 粗 


LYE® 


功 


J 


联系 人 字体 斜体 


联系 人 字体 大 小 


联系 僻 度 


联系 人 育 曲 图 


联系 人 电话 
联系 人 电 放 列表 
联系 人 头像 


联系 人 视觉 歼 未 《在 联系 人 有 青 曲 图 时 有 效 ) 


联系 人 文本 


联系 人 文本 颜色 


联系 人 是 否 可 见 


联系 人 完 度 


联系 人 组 件 





2.EmailPicker 组 件 





3.PhoneCall 组 件 





邮件 聚焦 事件 


邮件 失 焦 事件 


邮件 是 否 可 用 


邮件 字体 大 小 


邮件 高 度 


邮件 提示 


邮件 文本 


邮件 文本 颜色 


邮件 是 否 可 见 


邮件 胸 度 


邮件 


功 


J0F 
[YY 


TI 
[ay 


,PhoeneCallstarted 


开始 通 证 事件 


打 电 话 


电话 写 公 





电话 组 件 


4.PhoneNumberPicker 组 件 


- BftErP1IcKINne 


， BeforePickine 





PhoneNumberPickerl 7 


.GatFicus 


.LaostHeoeus 


,TouchDown 





Hk 
ey 


功 


电话 写 公 聚焦 事件 


电话 写 人 码 失 焦 事 件 


电话 号 但 拭 





下 事件 


电话 号 码 按 起 事件 


呼叫 电话 提取 方法 


电话 写 公有 有 时 


El 


联系 人 姓名 
联系 人 邮箱 
联系 人 邮箱 列表 


电话 号 码 是 否 激活 
电话 号 码 字 体 粗 体 


电话 是 - 写 守 公 冬 体 


电话 号 但 图 片 


电话 号 公 

电话 号 码 列 表 

联系 人 头像 

电话 号 码 视觉 效果 《在 电话 号 码 有 背景 


Eee Mr | 有 六 








电话 号 码 文本 


电话 号 码 文 本 颜色 





5.Sharing 组 件 


call . ShareFile 


分 至 文件 


分 至 文件 和 文本 


, Sharelle 


分 宇文 本 





享 组 件 
6.Texting 组 件 
功 能 


短信 和 到达 事件 


nn . EE. LL 大 | -了 
,EOES5 和 EE 十 夫人 二 
eIDOd 区 发 生 豆 信 


是 否 激活 Google Voice (国内 无 法 使 用 ) 


短信 内 容 


短信 接收 方式 ，1 为 不 接收 ，2 为 前 台 
接收 ，3 为 后 台 接 收 


短信 和 组件 





7.Twitter 组 件 


wri Tvltterl ‘Nentionsheceived 


,DEATCEhSUuceess ful 


, Luthorirze 


| 


‘Dehiuthorize 





私信 事件 


粉丝 增加 事件 


好 友 Twitter 更 新 事件 


Twitter 授权 


被 @@ 事 件 


搜索 成 功 事 件 


授权 方法 
检验 是 否 授权 
去 授权 


A.8 Storage 组 件 


i Titierl] ™ Wb Ts 


a tte] 


USEE 


si tterl ™ Wailblalshdb hb sie [ssf 





Twitterl 了 本 RequestHeol loyvwers 


call ,RequestFriendTineline 


a Ti tterl 了 Bl 


a ] Searchlritter 


query 


Ef: terl = 


LS EE 


fs lterl 7 Bw jh 


status 


status | 


lmagePath 





获取 私信 
获取 粉丝 
获取 朋友 Twitter 更 新 


搜索 
不 再 关注 


发 文字 Twitter 


发 图 片 Twitter 


私信 
粉丝 
关注 者 Twitter 更 新 
航 @@ 


搜索 结果 
图 片上 传 密 负 


用 记名 
Twitter 组 件 〈 国 内 暂 无 法 访问 ) 


1.File 组 件 


TYhen 【LE .CotTert 


call nl . poendTofile 
中 冯 秋 二 


tileName 


sf FF| lel = Wh ed 


fileNane 


| 
fileHanme 


call Bp . Soavefile 
terxt 


EN 





2.Fusiontable 组 件 





FusiontablesControll " Ba yy 
FusiontablesControll 7 Wa dm 


= uesiontablesContreoll =™ Wirlsln i, 


3.TinyDB 组 件 





功 


J0 
[CYC 


文件 组 件 获取 文本 事件 


退 加 文本 到 指定 文件 


删除 文件 


渎 取 文 件 


保存 文件 


文件 组 件 


功 


J 
CT 


融合 表格 获取 后 事件 


功 能 
融合 表格 查询 (已 过 期 ) 
退出 登录 
迹 出 碍 鹿 


设置 融合 表格 Api 密 钥 


议 置 香 询 


融合 表格 组 件 


(经 ) 


DBl 7 . 志 1Ear 上 二】 


inyDEl ™ Ni 
tag 


valueltlasNotlhere 


= LnyDEl 了 有 ea 一 
Li 


valueToStore 


4.TinyWebDB 组 件 


en Ts 


于 一 
到 


vAlUeldntirTe 


A.9 Storage 


1.ActivityStarter 组 件 








YT 


功 
清除 微型 数据 库 


J 


清除 标签 


读 取 所 有 标签 


读 取 指定 标签 


储存 标签 对 于 值 


微型 数据 库 组 件 


网 络 微型 数据 库 获取 数值 事件 


网 络 微型 数据 库 储 存 值 事件 


服务 大 出 条 事件 


网 络 微型 沉 





据 库 获取 标签 对 应 数值 


网 络 微型 数据 库 储存 标签 和 对 应 数值 


功 能 
网 络 微 型 数据 库 服务 器 地 址 


网 络 微型 数据 库 组 件 


2.BluetoothClient 组 件 





程序 调用 后 事件 


馈 调 用 程 夺 
调用 程序 


歼 据 类型 


数据 地 址 


结果 类 型 
结果 地 址 
程序 调用 组 件 


恒 块 





时 二 本 luUetoothClientl 了 BomadatT hp) ay ed a 


sl BlUetoothClientl 了 BM nr 


address 






EluetoothClientl ™ BNNs lishd bdelllll 
address 


uulia 





= Fluetoothilientl ™ Bit nl 






BluetoothClient] ™ Wha bby 
addres: 


4 BluetoothClientl "Wm 
I BluetoothClientl 了 B= 
-BluetoothClientl 了 Earp ll dl 









BluetoothClientl . RECEIYESI enedBytes 


mumberitbytes 


“ElucetoothClientl] 7 Behhh=ye 


mmberuftBytes 


: sf BluetoothClientl ™ Bo lal) erp ll a 





“EluetoothClientl 了 Wolpe el 


功 能 
蓝牙 客户 端 接收 字 节 数 


监 牙 客户 暗 是 否 连 接 指定 地 址 
蓝 才 客户 疡 是 否 连接 指定 uid 和 地 址 


断 开 蓝牙 客户 站 
蓝牙 客户 内 是 否 与 指定 地 址 配对 


蓝牙 客户 端 接收 签名 单字 节 数 
蓝 直 客户 病 接 收 签名 双子 
蓝牙 客户 端 接 收 签名 四 字 太 数 


蓝牙 客户 刑 接收 答 名 子 太 数 


蓝牙 客户 闹 接 收文 本 内 容 


蓝牙 客户 端 接收 未 签名 单字 节 数 
蓝牙 客户 端 接 收 未 签名 双 字 节 数 


BluetoothClientl 7 


. RecelvelnsieneddEByteNunber 


sh BluetoothClientl ™ Wiedep i) ll 


numnberOfBytes 


Eluetoothclientl ~™ Wiselel led Lb ly 


TU 相生 er 


Bluetoothilient] = Welaelpe adel ly 


3.BluetoothServer 组 件 


num ber 


. SENd4EyteNumber 


Lm beF 


. SENdBytes 


11 st 


. SENdLEext 


terKt 





蓝牙 客户 师 接 收 未 签名 四 了 字 


蓝牙 客 亡 病 接 收 未 签名 子 


蓝牙 客户 端 发 送 单字 节 


蓝牙 客 尸 喘 发 送 双 子 市 


蓝牙 客户 端 发 送 四 字 节 


蓝牙 客户 端 发 送 列表 


蓝牙 客户 端 发 送 文本 


蓝牙 客户 冰 地 址 和 名 称 
监 牙 客户 师 是 否 可 用 


监 牙 客户 刀 纺 但 


蓝牙 客户 问 定 界定 市 


蓝牙 客户 疾 是 任 激 活 


高 位 字 节 优先 


监 直 客户 裔 是否 连接 


蓝牙 客户 端 安全 性 


蓝牙 客户 端 组 件 


节 数 





EAI BluetocthServerl .ecEDtOOrmmecti on 


servicellame | 


BluetoothServerl TI 中 i 


serviceNane | 


UUI dd 


ee 
Bluetoothserver! 下 
.ReceliveSienedlByteNunber 
.ReceiveSiened2ByteNunber 
call .ReceiveSiened4ByteNumnber 


“BluetoothServerl ™ BMelodad ietherlale ln 


mmbervtbytes 





Wn BluctoothServerl 7 Horsephhadl 


nmberOfBytes 
BluetoothServerl ” :dds 


BluetoothServerl 7 Ada pa dh ly 





BluetoothServerl "™ Bde pl da i lela 






BluetoothServerl ™ Wel eth 


mmberifbytes 


si. EluetoothServerl ™ Balehl du lh ll 


mumber 





蓝牙 主机 端 连接 成 功 事件 


蓝牙 主机 端 接 受 连 接 


蓝牙 主机 绚 以 muuid 接受 连接 


蓝牙 主机 冰 可 接受 字 
蓝牙 主机 端 断 开 连 接 

蓝牙 主机 辛 接收 签名 单字 慷 数 
蓝牙 主机 痪 接收 签 名 双 字 玫 数 

蓝牙 主机 端 接收 签名 四 字 节 数 


蓝牙 主机 端 接收 签名 字 节 数 


监 牙 主机 病 接 收文 本 和 内容 


蓝牙 主机 端 接收 未 签名 单字 节 数 
蓝牙 主机 端 接收 未 签名 双 字 节 数 


蓝牙 主机 端 接收 未 签名 四 字 节 数 


蓝牙 主机 病 接 收 未 签名 子 刷 


蓝牙 主机 端 发 送 单字 节 


4.Web 组 件 


sft. BlustoothSseryverl ™ 国人 二 aa 


number 


. SENddE yt ENumber 


nmber 


oF Eluctoothoserverl 本 二 二 亲本 | 到 二 本 = 


11s+ 


SETTVETLT = Bs 


.Stophcceptine 





LIS 1 | rl T 忆 ] . ds ] sd Ls 
re | i -中 = 下 = TP | | | 一 | PT 一 i TE ” | a 
DCGLoOGmULLICL vcL), LC LL 
- | | 2 :1 BE 上 ] | 下 EF 和 | 上 Lr 1 | = L. ] 四 
1 TT IF "| ~ - 1 


功 


区 牙 主机 吴 发 送 双 了 字 市 


蓝牙 主机 奖 受 送 四 字 古 


监 直 主机 病 安 送 列表 


蓝牙 主机 端 发送 文 本 


蓝牙 主机 端 停止 接收 
蓝牙 主机 端 是 否 可 用 


葛 牙 主机 端 编 码 


蓝牙 主机 端 定 界定 节 
蓝牙 主机 端 是 否 激活 
高 位 字 节 优先 

蓝牙 主机 端 是 否 接收 
蓝牙 主机 端 是 否 连接 


蓝牙 主机 端 安全 性 


蓝牙 主机 户 端 组 件 


功 能 


获取 文件 事件 


狭 取 文 本 事件 


call .BuildRequestData a 
/ 网 络 组 件 请 求 列表 


| 国有 了 ss] ,中国 = 清 阶 COOKIE 
Delete 方法 
Get 方法 


.Html TextDecode 
Html 解析 


htmlText 


call -JsonTextDecode i 
Json 解析 


jsoenTert 


cal1l1 ell - .PostFile z : z 
| Post 文件 路 径 


path 


call . PostText 
i Post 文本 


Post 文本 编 公 


call .PutFile 
Put 文件 路 径 


Dath 


. PltTert | 
Put 站 本 


text | 


call .PutlextWithinceo 


Put 文本 编 但 


call .UriEncode ns 
| Uri 编 公 


Text 











A.10 LEGO MINDSTORM 组 件 


1.NxtColorSensor 组 件 


,上 DoweERAnese 





咽 应 文件 名 


是 否 人 允许 Cookies 


服务 天 啊 应 是 否 保存 为 文件 


服务 前 Url 


网 络 组 件 


颜色 传 厂 : 


功 


回 二 站 全 


ri 


台 尼 
BE 


围 之 上 事件 


ula HrtCol orSensorl 7 





2.NxtDirectCommand 组 件 





颜色 传感器 颜色 改变 事件 


颜色 传 感 需 光照 范围 内 事件 


闫 色 传感器 获取 颜色 
颜色 传感器 获取 光照 水 平 


沁 围 之 上 事件 是 否 泪 活 


沁 围 之 下 事件 是 否 激活 


设置 范围 下 线 


颜色 改变 事件 是 否 激活 


感应 颜色 是 否 激活 


D 


议和 置 江 转 上限 


范围 内 事件 是 否 激活 


eo rtDircctConnandsl 7" ee 


fileName | 


, DovwnloadFile 
S30UTCE 


destination 












| 


NxtDirectComaandsl 7 Had wf Ts 


sh 


,EtFiITRVATEVETSI oN 


= xtDirectConnandsl = GAP TdE dr 


SenNnsorPortLetter 





os xtDirectConmandsl T :yal 


motorPortLetter 机 





si NxtDirectComnandsl 及 EEDPGLILTYE 











HxtDirectCommandsl] 7 Eid ts 
wildcard | 


= xtDirectCommandsl 了 国医: 本 二 和 本 和 二 


seEnNnsorPortLetter 


ss xtDirectConmnandsl 7 BN:[s 


SsEnsorPortLetter 


NxtDirectCommandsl 7 BLD 
sensorPortLetter | 

list 

raDataLength 





si HxtDirectComnandsl 国有 二 


nailbox 





Po NtDirectCommandsl] = 有 (FE 4 


Talilbar | 





nessage jl 


于 
Tk 
[rT 


删除 文件 


将 文件 下 载 到 Nxt 


获取 电池 量 
获取 当前 运行 程序 名 
获取 固件 版 本 


功 能 


读 取 传 感 硕 值 


读 取 电机 输出 状态 


保持 开机 


返回 匹配 文件 


返回 讯 取 无 全 号 数据 


写 人 低速 数据 


读 取 信箱 


写 衣 县 


NrtDirectComnands] 7 Eve bill 


fileNane 


播放 声音 


NxrtDirectCommandsl = Bb mel 


fregquencyHe 揪 放 音 高 、 音 长 


dhraticonMs | 


HrtDirectComnandsl ™ Bl hd oe 
重 置 盎 放 因 地 


senscorPFortLetter ll 


.ResetNotorPosition 


notorPortLetter 重 首 申 梓 [位 首 


re]atiwe 和 


call . SEtBrickNane i a | 
设置 智能 模块 名 称 


nane 
a NtDirectCommandesl] ™ Boll Pd biel 
sensorPortLetter 南 


配置 输入 模式 


SENserTyHe 


“Fl itDirectConnandsl] ™ Weld bal hhh hd 


notorPortLetter 
i 设置 输出 状态 (电机 端口 字母 ， 功 
resulationllode 率 数 校 式 校 准 . 屋 速 a 运 全 状 
turnRatio | 太 . 转速 上 忠 ) 


runestate 役 


+AcRel .im | 





,xtDirectconnandsl ™ Bd) 1 
启动 程序 


DraoegranNanme 
call . StopPr ogran 停止 程序 
WxtDirectCoanandsl ™ Beeld 停 目 播 放 凋 兰 


直接 命令 组 件 





3.NxtDrive 组 件 


,loveEackward 
power 


distarwe 


,NoveEBackwardIndefini tely 


Dower 


aT. Hetlriwrel = Wf eb Fh 
Power | 


distance 


of Netli el = 。 随 态 和 忆 所 站 下 证 襄 王 日 工 简 二 计生 是 六 生生 下 二 可 


power 





a xtDrivel ”ns 


eall NxtDrivel = Ubeem le 


DOET 





a Nxtlnrlrel = Wn 


Dever | 





4.NxtLightSensor 组 件 


. howreRanee 


| .BelowRange 


. Nit+hinhanse 


NxtLigehtsensorl 








功 


le 
[TT 


后 退 功率 、 距 离 


持续 后 退 


前 进 功 率 、 距 离 


持续 前 进 
停车 


顺 时 针 转 


逆 时 针 转 


断 开 连 接 前 停车 


驱动 组 件 


功能 


光 传 感 带 范围 之 上 事件 


光 传 感 带 范围 之 下 事件 


光 传感器 光照 范围 内 事件 


获取 光照 水 平 





5.NxtSoundSensor 组 件 


高 于 上 限 事 件 是 否 激活 


低 于 下 限 事件 是 否 激活 


下 限 


上 也 


光照 可 测 事件 激活 


光 传 感 带 组 件 


总 ] 1 = \ beoveRanee 


声音 传感器 范围 之 上 事件 


,后 已 】 owRanee 


声音 传感器 范围 之 下 事件 


.WithinRanse 


声音 传 感 融 光照 范围 内 事件 
获取 声音 水 平 


高 于 上 限 事 件 是 否 激活 


低 于 下 限 事件 是 否 激活 


下 限 





上 限 





声音 可 测 事件 激活 





声音 传 感 带 组 件 
6.NxtTouchSensor 组 件 

功 能 
争 换 传 怀 带 按压 事件 


搜 摸 贫 情 硬 释 放 事 件 
触摸 传 感 需 是 否 按压 


触摸 传 感 硕 按压 事件 是 否 激活 


和 触 措 传 感 需 释放 事件 是 否 激活 





租 措 传 感 着 


7.NxtUltrasonicSensor 组 件 


[TY 


功 自 


了 


超声 波 传感器 范围 之 上 事件 


7 . 巧 ELSVYERaDE 


超声 波 传感器 范围 之 下 事件 


t+rasconicoensorl 7 BMWmnhrt bet 


超声 波 传 感 融 超声 波 范 围 内 事件 
nsorl 7 Usdipthdlles Ei 取 耶 双 


局 于 上 懂事 件 是 否 泪 活 


低 于 下 限 事 件 是 否 油 话 


下 限 


超声 波 可 测 事件 激活 





超声 波 传感器 组 件 


附录 B ”App Inventor 2 指令 


B.1 _ Control 指令 区 (控制 模块 ) 


英文 名 称 中 文 名 称 i 功 能 


风 


如 果 符 合 站 插 模 中 的 条 
件 ， 则 执行 then 中 的 程序 ， 

















es 单 击 蓝 色 方块 可 拼接 else 过 
else 程序 
如 果 符 合计 插 槽 中 的 条 
if:…then… 件 ， 则 执行 then 中 的 程序 ， 
else 否则 执行 else 中 的 程序 ; 
左 侧 带 突 起 的 为 呼叫 型 
如 果 符 合 站 插 模 中 的 条 件 ， 
让 | 如 采 … 承 条 2 则 执行 then 中 的 程序 ， 如 未 
else if…then | 如 果 … 就 ey 和 符合 else 计 插 模 中 的 条 件 ， 
由 执行 下 方 then 中 的 程序 
for each 
(mumber) 从 1 到 5， 每 次 增加 1， 
from to by**: 循环 执行 do 中 的 程序 


do 





tor each 


执行 每 一 个 
列表 中 的 元 素 


(item)in list 
do 


while 


test***do 


do***result 


evaluate 


绽 末 忽略 妈 


but 1enore 
回 值 


result 


open nother 


SsCICCH 


open nother 
screen with 


始 值 


start value 


英文 名 称 | 中 文 名 称 


启动 男 一 个 








list 后 持 权 跟 list 变 量 类 
型 ， 遍 历 list 的 每 个 元 素 执 
行 do 中 的 程序 。 常 用 来 过 
历 列 表 

只 要 符合 test 后 的 条 件 

时 ， 就 一 直 执 行 do 中 的 程 
序 ， 注 意 防 止 死 循环 

执行 do 程序 ， 

值 


返回 result 


常用 来 做 转 接 头 ， 执 行程 
序 但 不 需要 返回 值 


evaluate but ijenore result 


多 屏幕 跳 转 时 适用 ， 后 面 
接 text 类 型 ，screen 的 名 字 ， 
如 screen? 


可 将 screenl 的 值 传 松 到 
screen2 中 ， 实 现 跨 屏幕 传 


值 ，startValue 后 可 接 变量 名 


open another screen screenNane 


oer Aanvitlyer Screen with start value scCreerlane 


本 下 下 于 下 全 纪 1 i 


(经 ) 


和 er 


功 
在 新 屏幕 获得 上 一 屏幕 传 
送 的 变量 值 

启动 新 屏幕 时 可 以 关闭 旧 
屏幕 ， 如 还 有 未 关闭 屏幕 
关闭 屏幕 不 会 退出 程序 
不 管 有 几 个 未 关闭 的 愤 
幕 ， 都 可 以 直接 关闭 程序 


能 


close application 


v3E SeTEEN with walue result 


get start 
获得 传送 值 
value 
关闭 当前 
close Screen 
Close gh 
. 关闭 程 厅 
application 
close eh = 
关闭 屏 蒂 
screen with 


传 值 


value result 
close 
screen with | 
plain text 文本 信息 
get plan 
start text 


本 呢 信 息 


B.2 Logic 指 令 区 (逻辑 模块 ) 





获取 传送 文 





关闭 屏 带 时 ,传送 变量 值 


关闭 屏幕 传 





loose screen With Dlain text text 


在 新 屏幕 获得 上 一 屏幕 


l 伟 


| get plain start text 


送 的 文本 祖居 


和 本 

true 布尔 但 具 ， 表 示 某 种 情况 成 立 
< Er i 
vi rl 逻辑 运算 非 ， 相 反 情况 
and i 逻 惟 运算 与 








B.3 ”Math 指令 区 (数学 模块 ) 


英文 名 称 功 能 


下拉 家 法 
不 < 十 








图 形 功 能 
区 ] 宕 运算 ， 如 2^3 为 吕 


1 到 100 的 随机 整数 ， 





英文 名 称 


A 





random integer 





随机 整 站 random integer fron 
from to 包含 1 和 100 
pk 0~1 的 随机 小 数 
a 0~1 随 机 
random fraction ranrlom fraction 小 数 点 后 位， 不 含 0 


小 数 
和 1 


一 般 接 pr 调 
上 于 村 [种 了 于 randonm SET seed to 试 程 序 日 寸 跟 常 ， 可 产 


random set seed 





to 
生 国 定 的 随 相 数 数 7 
返回 几 个 数 中 的 最 小 
i111 





值 ， 下 拉 和 前 法 可 选 最 大 值 
人 开 根 Cz TIT 开平 方 根 
一 Was 取 相反 值 
四 舍 五 人 到 整 将 位 ， 
如 round(3.4) 为 3 
round(3.5) 为 4 


回 上 取 整 到 整数 位 ， 
ceilin 加 上 取 整 Ceiling ” ce 
WH ceiling(3.4) 为 4 


round 





Hoor 


modulo 


reinalnder 


quotient 


slll 
COS 


tan 


atan2 


convert radians 
dh radians to degrees ™ 
to degrres 


英文 名 称 


ftormat as 


人 tormat as decimal 
格式 化 数字 : 


decimal number mmber 


places : | places 


15 a unmber 


is a mmber’ 


B.4 Text 指 令 区 (文字 模块 ) 


= 


|,， modulo(11,.-5)=-4， 








向 上 取 整 到 整数 位 ， 


如 Hoor(3.4) 为 3 


Modulo 与 除数 正 负 相 


modulo(—11.3)=4 


remainder 写 蕉 | 潜 数 下 值 


相同 ，remainder(11,-5)=1， 


remainder(—11.$)=-—1 
quotient(11.-5)=-2, 
quotient(-11.5$)=-——2 


正弦 后 跟 角度 


places 后 为 小 数位 


退回 住 为 true 或 flase 


瑞 文 名 称 


text 


om 


length 


1s empty 


compare texts 


trim 


starts at 回 传 … 在 字 


text***plece 镍 串 的 位 置 
contains 性 否 包含 字 
text…Ppiece 香 唐 


以 … 字 符 分 
割 字符 虽 

以 空格 分 基 
字符 吓 
指定 开始 位 
置 和 长 度 分 制 
字符 串 


split text at 

split at spaces 

seogment text 
start leneth 


replace all 
text segement 


replacement 


B.5 List 指令 区 (列表 模块 ) 





连接 字符 串 ， 常 用 来 和 变 


字符 串 长 度 ， 注 意 中 瑞 文 、 
站 及 全 和 标点 竺 中 区 
， 与 其 他 编程 语言 不 同 
字符 串 是 理 为 空 ， 返 回 Te 
or flase 
字符 串 比 较 ， 从 首位 开始 
比较 ， 奖 文 按 字母 顺 厅 ， 小 写 
比 大 写 大 ， 汉 字 按 拼音 顺序 ， 
厂 拼 音 相 同 则 笔画 多 的 大 
删 际 自 尾 空格 ， 中 间 的 空 
格 不 能 删除 


喘 文 概 为 大 与 ，downcase 
为 变 小 写 

回 传 下 方 字 符 在 上 方 字符 
电 的 位 置 ， 第 1 个 字符 为 ] 
上 方 字符 串 是 否 包含 下 方 
piece 辆 字符 ， 返 回 true or false 


conitainmns text 


texrt 以 at 后 的 .宇和 人 竺 分 荐 text 
a 字 竺 串 ， 返 回 值 为 list 
以 空格 分 割 字 和 人 符 串 ， 返 回 
值 为 list 
a start 和 和 length 后 跟 数字 ， 
start 从 第 几 位 开始 ， 稚 取 指 定 长 
-一 度 的 字符 中 


split at spaces 


replace all text 


segment 后 接 原 字 竺 帅 ， 
[= 
EE ee replacement 接 蔡 换 后 字符 串 


| 


英文 名 称 中 文 名 称 功能 
初始 化 列表 变量 或 列 
表 清 空 


ake a l11st | 列表 ， 旋 企 7 上 
make a list 创建 列表 re ee 


添加 元 素 到 | add itens to list list 新 元 对 添加 在 列表 
列表 | 必 郭 

元 素 是 三 在 is in list” thing 
列表 list 


create emnty list 


create empty list 创建 空 列表 





add items to list 





is in list 返回 true 或 false 


列表 元 素 的 个 数 


length of list leneth of list list | 


ls list empty 下 | 形 是 否 为 空 is list empty? list | 返回 true 或 false 
省 机 选取 多 本 
pick a random item list 限 机 选取 列 pick a random item list | 随机 选取 列表 元 隶 





表 元 隶 
元 素 在 中 上 index in ligst thineg 
的 位 置 se 
迁 取 列表 指 select list item 1ist 时 选取 列表 指定 位 置 元 
定位 置 元 隶 ee 素 ， 首位 从 1 开始 计算 


Indexg In list 


首位 从 1 开始 计算 


select list 1tem 





添加 元 素 到 
列表 指定 位 置 


Insert list item 


百 换 列表 指 
定位 置 元 妹 


replace list item 


删除 列表 指 


reimove list item 
定位 置 元 率 


append to list 


copy list 复制 列表 
is a list 是 否 为 列表 


列表 转 为 去 
号 分 隔 的 行 
列表 转 为 空 
格 的 行 
逗号 分 隔行 
转 为 列表 


list to csv row 


list to csv table 


list from csv row 


英文 名 称 
裤 格 分 隅 行 
转 为 列表 


list trom csv table 


根据 键 值 查询 


lookup In palrs 


BB 


oO 


Color 指 令 区 (颜色 模块 ) 
英文 名 称 | 中 文 名 称 


inake color 





拆 分 颜色 


split color 


B.7 Variable 指 令 区 (变量 模块 ) 








中 文 名 称 








make cl er 


split color 





insert list item list 


添加 元 素 到 列表 指定 
位 置 


1 ricex 


TEDlacEeE Jljst iten list 


替换 列表 指定 位 置 
删除 列表 指定 位 置 


IEDIacement | 


remove list item list 制 


index 

append to list listl z 
” 将 list2 合并 到 list1 

复制 列表 

返回 true 或 false 

列表 转 为 行 ， 以 逗号 
分 陋 
分 陋 


CoODPY list list 


is a list? thine MM 


list to csv Tow list | 


list to casw table list 


list from cev row text 


逗号 分 隔行 转 为 列表 


宇 档 分 隐 行 半 为 列表 


list froem csv table terxt | 


一 般 用 在 JSON 解析 
后 ， not found 后 跟 没 有 
找到 的 返回 值 


lookupn in pairs key 
pairs | 


nath eurd 


Eb 
月 上 


图 形 


make a J]ist 


功 

根据 RGB 色 标 生成 指定 
颜色 

将 给 定 颜色 返回 为 RGB 
列表 


S 


英文 名 称 


initialize global 


初始 化 全 局 变量 


name to 
et 


set to 


initalize local| ,) ，，， ,wm,. 


name to 





B.8 procedure 指 令 区 (程序 模块 ) 


英文 名 称 荔 


J 
[WEY 


ee | to oo z 
procedure do 无 运 回 仁 程 友 定义 程 夺 
Procedure**: _ , i procedure 0 ee 
TesSU 





附录 C 常用 ActivityStarter 查 询 


打开 蓝牙 Action:android.bluetooth.adapter.aciton.REQUEST ENABLE 


打开 录像 机 Action::android.media.action.VIDEOQ CAPTURE 
打开 照相 机 Action::android.media.action.IMAGE CAPTURE 
打开 录 首 机 Action:android.MediaStore.RECORD SOUND 
打开 音乐 播放 稀 Action:android.ntent.action.MUSIC PLAYER 


打开 网 者 Action:androd .mtent.action.VIEW 
“I 
DataUri:http:i/www.appinventor.com.cn 
Pe Action:android.intent.action. VIEW 
二 和 开 Google 地 图 
DataUri:geo:52.377348,4.745877 
Action:android.action.GET CONTENT 
打开 文件 DataType:container/directory 
DataUri:file:///sdcard/ 
ES 文件 浏览 各 打 开 文 件 Action:com.estrongs.action.PICK FILE 


Action:android.ntent.action.SEND 

ActivityPackage:com.sina.welbo 

分 部 到 新 浪 微 博 ActivityClass:com.sina.weibo.EditActivity 
DataType:text/plain 
ExtraKey:android.mntent.extra.TEXT 


ExtraValue: 推 存 你 关注 @appinventor 爱好 音 


Action:androld.1ntent.action.SEND 
ee DataUri:smsto:13800000000 
发 送 短 信 / 
ExtraKkey:sms body 


ExtraValue: 推 存 你 学 人 appinventor 


Action:androld.intent.action. VIEW 


DataUri:mailto:your(Vhotmail.com?subject=hello 


发 邮件 
ExtraKey:body 
ExtraValue: 推荐 你 学 汁 appinventor 

动 微 信 ActivityPackage:com.tencent.mm 

司 动 令 Te z ; 
ActivityClass:com.tencent.mm.uil.LauncherUI 
Action:android.mtent.action.SEND 

pa | "十 ， 二 站 1 

分 齐 广 本 DataType:text/plain 
ExtraKey:android.mtent.extra.TEXT 
ExtraValue: 推 存 你 学 习 appinventor 
Action:android.mtent.action. VIEW 

安 泌 apk Datalype:application/vnd.android.package-archive 


DataUri:file:///mnt/sdcard/abc.apk 


附录 D ”App Inventor 网 络 资源 


1.Al2 服 务 器 

官方 服务 器 : http://ai2.appinventor.mit.edu/ 

官方 备用 服务 器 (大 陆 可 用 ) : http://contest.appinventor.mit.edu/ 
国内 个 人 服务 器 : 浙 师 大 附中 http://ai.ourschool.cn/ 

Wanndy: http://ai2.chinacloudapp.cn/ 

老 企 婆 : http://www.17coding.net:8888/ 

2. 资 源 下 载 

百度 网 盘 : http://pan.baidu.com/share/home?uk=204865446 

3. 网 络 资源 

(1) 简体 中 文 

http://www.appinventor.com.cn 

http://www.appinventor.cn 

http://www.17coding.net 
http://www.google.cn/intl/zh-CN/university/curriculum/index.html 
(2) 繁体 中 文 

http://www.appinventor.tw 
https://sites.google.com/a/stu.nknush.kh.edu.tw/appinventor/ 
(3) 买 文 

http://appinventor.mit.edu/explore/ 

http://puravidaapps.com 
http://appinventor.mit.edu/appinventor-sources/ 
http://sourceforge.net/projects/ai2u/ 
http://sourceforge.net/projects/ailivecomplete/ 
http://appinventorblog.com/ 
https://plus.google.com/u/0/communities/109900432278954380687 


http://www.appinventorblocks.com 
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